Ссылка на угловой компонент дротика недоступна - PullRequest
Новая
       7

Ссылка на угловой компонент дротика недоступна

0 голосов
/ 26 ноября 2018

Я попытался разделить пример макета приложения Angular Dart на разные компоненты, но функция переключения ящика недоступна.Когда один и тот же код находится в одном файле.Функция переключения доступна. Исходное содержимое файла

parent.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);
  }

}

hook.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>

hook.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;
  }

}

navigation.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, когда он разделен.

1 Ответ

0 голосов
/ 28 ноября 2018

Ящик на самом деле использует здесь ExportAs компонента ящика: https://github.com/dart-lang/angular_components/blob/7f254c89cbbd512cc284a7e9d03bb687f9948bd9/angular_components/lib/app_layout/material_temporary_drawer.dart#L15

Это действительно не нужно для компонента, но мы хотели, чтобы директива и компонент работали одинаково.

Вам нужно будет либо добавить exportAs = "tray", либо просто использовать синтаксис #drawer без использования # box = "box"

...