Question

我正在浏览Angular教程，可以看到组件包含多个模板的有用性。例如这是一个充满＆＃39;的组件。和＆＃39; min＆＃39;模板

import { Component, Input} from '@angular/core'
import { Hero } from './hero'

@Component({
    selector: 'my-hero-detail',
    template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
    `
})
@Component({
    selector: 'my-hero-detail-min',
    template: `
    <div *ngIf="hero">
      </label>{{hero.id}}</label>
    </div>
    `
})
export class HeroDetailComponent {
    @Input()
    hero: Hero;    
}

毋庸置疑，它不起作用：我怎样才能使它发挥作用？

Answer 1

你不能这样做。但是，有几种方法可以实现类似的行为。

第一个是在一个单独的类中实现逻辑，它将由facade类继承。尽管人们对这种方法有疑问但有效。见plunkr

import { Component, Input} from '@angular/core';
import { Hero } from './hero';

class HeroDetailAbstractComponent {
    @Input()
    hero: Hero;    
}

@Component({
    selector: 'my-hero-detail',
    template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
    `
})
export class HeroDetailComponent extends HeroDetailAbstractComponent {};

@Component({
    selector: 'my-hero-detail-min',
    template: `
    <div *ngIf="hero">
      </label>{{hero.id}}</label>
    </div>
    `
})
export class HeroDetailMinComponent extends HeroDetailAbstractComponent {}

另一种方法是使用另一个输入参数，例如调用mode：

import { Component, Input} from '@angular/core'
import { Hero } from './hero'

@Component({
    selector: 'my-hero-detail',
    template: `
    <div *ngIf="hero && mode === 'max'">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
    <div *ngIf="hero && mode === 'min'">
      </label>{{hero.id}}</label>
    </div>
    `
})
export class HeroDetailComponent {
    @Input()
    hero: Hero;    

    @Input()
    mode: string; 
}

这两种方法都很有效。我个人更喜欢第一种方式，因为编写单独的单元测试看起来更容易，感觉更自然。

Answer 2

如果你想要不同的选择器，它必须是两个组件。或者，您可以使用the ngSwitch directive执行以下操作：

<my-hero-detail [hero]="hero" [full]="true"></my-hero-detail>

然后将组件包含为：

minMode

Angular每个组件可以有多个模板吗？

2 个答案: