Angular笔记（三）组件交互

最新推荐文章于 2024-07-22 10:09:57 发布

kattiekattie

最新推荐文章于 2024-07-22 10:09:57 发布

阅读量265

点赞数

分类专栏： Angular 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/m0_37925276/article/details/129699505

版权

文章目录

一、Input

子：

@Input() hero!: Hero;
@Input('master') masterName = ''; //不推荐起别名

父：

//html：
<app-hero-child [hero]="hero" [master]="master"> </app-hero-child>
//ts：
export class HeroParentComponent {
   
  hero = '';
  master = 'Master';
}

二、Input：setter

使用一个输入属性的 setter，以拦截父组件中值的变化，并采取行动。

e.g. 子组件 NameChildComponent 的输入属性 name 上的这个 setter，会 trim 掉名字里的空格，并把空值替换成默认字符串。

子：

export class NameChildComponent {
   
  @Input()
  get name(): string {
    return this._name; }
  set name(name: string) {
   
    this._name = (name && name.trim(