1. 问题,不太理解ngx-bootstrap示例中的的@Input使用方法
hero-parent.component.ts
@Component({
selector: 'app-hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<app-hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</app-hero-child>
`
})
export class HeroParentComponent {
heroes = HEROES;
master = 'Master';
}
hero-child.component.ts
@Component({
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
ngx-bootstrap中Alert组件部分@Input的使用:
demo/.../alerts/.../basic/basic/html:
<alert type="success" test="123">
<strong>Well done!</strong> You successfully read this important alert message.
</alert>
src/alert/alert.components.ts:
@Component({
selector: 'alert,bs-alert',
templateUrl: './alert.component.html'
})
export class AlertComponent implements OnInit {
@Input() type = 'warning';
...
ngOnInit(): void {
console.log('type:'+ this.type);
...
}
...
}
知道结果了:
如果属性不添加[]则angular认为其值为一个不会改变的字符串,如果添加[]则angular认为其值为变量。