将绑定的标题属性还原为父标题

Question

这与像这样的问题相反。

我在父元素中有一个子元素（在本例中为matSelect中的matCard ，这可能无关紧要），并为父元素设置了title 。 子元素可能提供也可能不提供自己的title ：

<mat-card title="Parent title">
  <mat-select [title]=getChildTitle()>
  </mat-select>
</mat-card>

有什么我可以从getChildTitle()返回以使其恢复为父title文本的唯一方法，还是我可以这样做以再次指定父标题的唯一方法，à la [title]=getChildTitle() ?? 'Parent title' [title]=getChildTitle() ?? 'Parent title' ? 只是返回undefined似乎并没有这样做 - 然后我的标题文本显示为“undefined”。

Answer 1

您提供了有关如何传入这些标题的一些背景信息。我假设您有一个将使用mat-card和mat-select的组件。

在 my-component.ts

    @Component({
      selector: 'my-component',
      templateUrl: 'my-component.html',
      styleUrls: ['my-component.css'],
    })
    export class MyComponent{
      
       @Input()
       public parentTitle: string;

       @Input()
       public childTitle?: string;

       public function getChildTitle() {
          return this.childTitle ?? this.parentTitle;
       }
    }

在 my-component.html

<mat-card [title]="parentTitle">
  <mat-select [title]=getChildTitle()>
  </mat-select>
</mat-card>

在 app-component.html

<!-- this will use parent for both parent and child title -->
<my-component parentTitle="Parent"></my-component>