如何应用角度组件的自定义标签？

Question

我正在尝试在AngularDart项目中应用角度组件的素材自定义标签，但是生成的标签只是基本标签  CSS不适用于示例组件的自定义选项卡。 如何应用CSS？

以下代码生成图像中显示的结果，而不是示例中的自定义标签。

app_component.html

    <material-tab-panel centerStrip class="tab-panel" [activeTabIndex]="1">
    <material-tab label="tab1">
        Eager Content of Tab 1
    </material-tab>
    <material-tab label="tab2">
        <!-- named-content component simply prints its name when instantiated -->
        <named-content name="Eager Tab (Tab 2)">
            Eager Tab 2 content.
        </named-content>
    </material-tab>
    <material-tab label="tab3">
        <div *deferredContent>
            <!-- named-content component simply prints its name when instantiated -->
            <named-content name="Deferred Tab (Tab 3)">
                Lazy Tab 3 Content
            </named-content>
        </div>
    </material-tab>
</material-tab-panel>
<h1>My First AngularDart App</h1>

<todo-list></todo-list>

app_component.scss

@import 'package:angular_components/css/material/material';
@import 'package:angular_components/material_tab/mixins';

@include tab-panel-accent-color('.tab-panel', $mat-red);
@include tab-panel-tab-strip-width('material-tab-panel[centerStrip]', 400px);

app_component.dart

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

import 'src/todo_list/todo_list_component.dart';

// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [
    materialDirectives,
    DeferredContentDirective,
    MaterialTabComponent,
    MaterialTabPanelComponent,
    NamedContentComponent,
    TodoListComponent],
  providers: const [materialProviders],
)
class AppComponent {
  // Nothing here yet. All logic is in TodoListComponent.
}

/// Simple pass-thru content container which announces its construction and
/// displays a label (in a <p> tag) above the content.
/// Only use this component in demos.
///
/// __Attributes__
/// `name: string` -- Name of component.
@Component(
  selector: 'named-content',
  template: r'''
        <p>{{label}}</p>
        <ng-content></ng-content>''',
)
class NamedContentComponent {
  String get label => '$_componentName Content';
  final String _componentName;
  NamedContentComponent(@Attribute('name') this._componentName) {
    print('Named Component "$_componentName" instantiated');
  }
}

Answer 1

您可以在此处查看结果。这是我期望的。重点颜色（文本和下划线）为红色，标签条的宽度为400px。你想做什么？