將綁定的標題屬性還原為父標題

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>