Question

我具有以下选项卡组件：

@Component({
  selector: 'tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.css'],
  providers: [TabService]
})

export class TabComponent implements OnInit {

  @Input() active: boolean;
  @Input() title: string;

  public value: string = 'Testing';

  constructor(private tabService: TabService) { }

  ngOnInit() { }

}

使用以下模板：

<div [hidden]="!active" class="toolbar">
  <ng-content select="[toolbar]"></ng-content>
</div>
<div [hidden]="!active" class="content">
  <ng-content></ng-content>  
</div>

我按如下方式使用它：

<tabs>
  <tab title="Tab 1">
    Value: {{value}}
  </tab>
</tabs>

但是{{value}}没有显示任何值...使用选项卡时如何显示？

Answer 1

您的value属性在TabComponent中，但是您试图在另一个组件的模板中使用它。您应该将Value: {{value}}移到TabComponent模板中，或在使用value的组件中创建一个名为<tab>的属性。

Answer 2

如果要显示“测试”字符串，请将其包含在标签模板中：

<div [hidden]="!active" class="toolbar">
  <ng-content select="[toolbar]"></ng-content>
</div>
{{ value }}
<div [hidden]="!active" class="content">
  <ng-content></ng-content>  
</div>

在选项卡组件中，未为active赋值，因此它是虚假的，因此被隐藏了。将其设置为true：

<tabs>
  <tab title="Tab 1" [active]="true">
    Value: {{value}}
  </tab>
</tabs>

此外，value也被排除，因此其值来自其模板中具有tab组件的组件。因此，您需要从父模板进行设置。

Stackblitz

在模板中使用组件的值

2 个答案: