Angular Dart 组件参考无法访问

Question

我尝试将 Angular Dart 应用布局示例拆分为不同的组件，但抽屉切换功能无法访问。当相同的代码在一个文件上时。切换功能是可用的。 Original File Content

父.html

<drawer #drawer="drawer"></drawer>
<div class="material-content">
  <navigation (toggleState)="drawer.toggle()"></navigation>
  <content></content>
</div>

---

parent.dart

import 'package:angular/angular.dart';

import 'package:console/src/components/navigation/navigation.dart';
import 'package:console/src/components/drawer/drawer.dart';

@Component(
  selector: 'dashboard-layout',
  styleUrls: [
    'dashboard_layout.css',
  ],
  templateUrl: 'dashboard_layout.html',
  directives: [
    Drawer,
    Navigation,
  ]
)
class DashboardLayout implements OnInit {

  @override
  Future<Null> ngOnInit() {
    return null;
  }

  toggleDrawer () {
    drawerVisible = !drawerVisible;
    print(drawerVisible);
  }

}

---

抽屉.html

<material-drawer persistent>
<material-list *deferredContent>
    <div group class="mat-drawer-spacer"></div>
    <div group>
        <material-list-item>
            <material-icon icon="inbox"></material-icon>Inbox
        </material-list-item>
        <material-list-item>
            <material-icon icon="star"></material-icon>Star
        </material-list-item>
        <material-list-item>
            <material-icon icon="send"></material-icon>Sent Mail
        </material-list-item>
        <material-list-item>
            <material-icon icon="drafts"></material-icon>Drafts
        </material-list-item>
    </div>
    <div group>
        <div label>Tags</div>
        <material-list-item>
            <material-icon icon="star"></material-icon>Favorites
        </material-list-item>
    </div>
</material-list>

抽屉.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'drawer',
  styleUrls: [
    'drawer.css',
    'package:angular_components/app_layout/layout.scss.css'
  ],
  templateUrl: 'drawer.html',
  directives: [
    DeferredContentDirective,
    MaterialListComponent,
    MaterialListItemComponent,
    MaterialPersistentDrawerDirective,
    MaterialIconComponent,
  ]
)

class Drawer extends MaterialDrawerBase implements OnInit {
  bool customWidth = false;
  bool end = false;

  Drawer() : super(visible: true) {

  }

  @override
  Future<Null> ngOnInit() {
    return null;
  }
}

---

navigation.dart

import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

import 'package:console/src/components/avatar/avatar.dart';
import 'package:angular_components/laminate/overlay/zindexer.dart';

@Component(
  selector: 'navigation',
  styleUrls: [
    'navigation.css',
    'package:angular_components/app_layout/layout.scss.css'
  ],
  templateUrl: 'navigation.html',
  directives: [
    PopupSourceDirective,
    MaterialIconComponent,
    MaterialButtonComponent,
    MaterialToggleComponent,
    MaterialPopupComponent,
    DeferredContentDirective,
    MaterialPersistentDrawerDirective,
    Avatar,
  ],
  providers: [popupBindings, ClassProvider(ZIndexer)],
)

class Navigation implements OnInit {

  bool visible = false;
  final _toggleRequest = StreamController();

  Iterable<RelativePosition> avatarPopupPositions = [
    RelativePosition.AdjacentBottomRight
  ];

  @Output()
  Stream get toggleState => _toggleRequest.stream;

  void toggleDrawer() {
    _toggleRequest.add(null);
  }

  @override
  Future<Null> ngOnInit() {
    return null;
  }

}

---

导航.html

<header class="material-header shadow">
<div class="material-header-row">
    <material-button icon
                     class="material-drawer-button" (trigger)="toggleDrawer()">
        <material-icon icon="menu"></material-icon>
    </material-button>
    <span class="material-header-title">Console</span>
    <div class="material-spacer"></div>
    <avatar [userName]="'Someone Awesome'"
            popupSource
            #source="popupSource"
            (trigger)="visible = !visible">
    </avatar>
    <material-popup
            [source]="source" [(visible)]="visible"
            [enforceSpaceConstraints]="true"
            [preferredPositions]="avatarPopupPositions">
        <div style="width: 256px; height: 200px">
            Hello, Hello, Hello, Hello.
        </div>
    </material-popup>
    </div>
</header>

---

错误

[error] The method 'toggle' isn't defined for the class 'Element'.
 (package:console/src/layouts/parent/parent.template.dart, line 336, col 18)

那么为什么#drawer="drawer" 是一个 AngularDart 组件，当所有内容都在一个文件中时，它具有切换功能，但在拆分时它是一个 HTML 元素。

Answer 1

抽屉在这里其实是使用了抽屉组件的exportAs：https://github.com/dart-lang/angular_components/blob/7f254c89cbbd512cc284a7e9d03bb687f9948bd9/angular_components/lib/app_layout/material_temporary_drawer.dart#L15

组件确实不需要它，但我们希望指令和组件以相同的方式工作。

您要么需要添加 exportAs="drawer"，要么只使用 #drawer 语法而不使用 #drawer="drawer"