Question

我正在尝试使用acx-scoreboard组件但无法自定义其font-size和text-transform：capitalize;标签，价值和描述。所以，任何人都可以帮助我如何做到这一点。

app_component.html

<button (trigger)="generateNames()">
Names
</button>
<ul>
   <li *ngFor="let item of names">
      <acx-scorecard
          selectable
          [selected]="true"
          label="Selected scorecard"
          value="{{item.first}}{{item.second}}"
          description="Try clicking this">
      </acx-scorecard>
   </li>
</ul>

app_compoment.dart

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

 @Component(
     selector: 'my-app',
     templateUrl: 'app_component.html',
     styleUrls: const ['app_component.css'],
     directives: const [
       CORE_DIRECTIVES,
       materialDirectives,
       ScoreboardComponent,
       ScorecardComponent,
   ],
   providers: const [materialProviders],
   )

    class AppComponent implements OnInit    {          
      var names = <WordPair>[];

      void generateNames() { names =    generateWordPairs().take(2).toList(); }

       @override void ngOnInit()   { generateNames(); }

  }

Answer 1

在内部，我们使用SASS mixins来自定义样式。 POSIX standard

不幸的是，该功能在开源版本中尚未公布。 SASS文件可供您参考，并可向您展示我们如何定位不同的元素。我现在正在努力允许在您的项目中导入和访问它们。

目前，解决方法是使用类似的css来定位记分卡的不同部分。

该技术唯一的问题是，如果用于表示记分卡的html元素发生变化，它很容易中断。 mixin避免了这种情况，因为它充当抽象，并且有一个契约，如果记分卡发生变化，它应该适当更新。

例如，您可以通过向包含记分卡的组件添加样式来更改标签的样式：

acx-scorecard ::ng-deep h3 { // targets the scorecard label
  text-transform: capitalize;
}

:: ng-deep是/ deep / angular现在支持的替代。

Answer 2

目前，您的最佳解决方案是使用uppercase pipe。

<acx-scorecard
      selectable
      [selected]="true"
      label="{{Selected scorecard | uppercase }}"
      value="{{item.first | uppercase}}{{item.second | uppercase}}"
      description="{{Try clicking this | uppercase}}">

如何在AngularDart中大写acx-scorecard值文本

2 个答案: