元件間互動模式

範例

１、 父元件 → 子元件
@Input 裝飾器

// 子元件.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
 // 在子元件透過 @Input 裝飾器定義屬性
 @Input() myName!: string;

 constructor() {}
 ngOnInit(): void {}
}

<!--子元件.html-->
<p>{{ myName }}</p>

// 父元件.ts
@Component({
 selector: 'app-parent',
 templateUrl: './parent.component.html',
 styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
 input1:string = '';

 constructor() {}
 ngOnInit(): void {
   this.input1 = "Cindy";
 }
}

<!--父元件.html-->
<!--在此綁定 input1 給子元件的屬性 myName-->
<app-child [myName]="input1"></app-child>

２、 子元件 → 父元件
@Output 裝飾器（父無法使用子方法及屬性）

// 子元件.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
 // 在子元件透過 @Output 裝飾器定義
 @Output() status = new EventEmitter<Boolean>();

 constructor() {}
 ngOnInit(): void {}

 sendMessage(){
   // 傳值給父元件!
   this.status.emit(this.isSuccess);
 }
}

<!--子元件.html-->
<button (click)="sendMessage(true)">寄送</button>

// 父元件.ts
@Component({
 selector: 'app-parent',
 templateUrl: './parent.component.html',
 styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
 constructor() {}
 ngOnInit(): void {}

 dosomething(event :Boolean){
   console.log(event); // 得到子元件傳過來的 true 值
 }
}

<!--父元件.html-->
<app-child (status)="dosomething($event)"></app-child>

@ViewChild 裝飾器（父可使用子 public 方法及屬性）
※在父元件生命週期 AfterViewInit() 後， @ViewChild 才會存在。

// 子元件.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
 visible: boolean = false;

 constructor() {}
 ngOnInit(): void {}

 // 方法
 changeVisible(){
    this.visible = !this.visible;
 }
}

<!--子元件.html-->
<div *ngIf="this.visible">文字文字文字</div><!-- this. 不用加上也沒關係 -->

// 父元件.ts
@Component({
 selector: 'app-parent',
 templateUrl: './parent.component.html',
 styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
 // 取得子元件(公開的)方法及屬性!
 @ViewChild(ChildComponent) child: ChildComponent;

 constructor() {}
 ngOnInit(): void {}

 showChildText(){
   this.child.changeVisible();
 }
}

<!--父元件.html-->
<button (click)="showChildText()">:D</button>

３、 元件 → 元件
包成 Service 使用（我覺得我舉的例子有點爛，可以移駕至下面參考來源來看範例）

// data.service.ts
export class DataService {
 name: string = Cindy;
}

// XXX.component.ts
@Component({
 selector: 'app-XXX',
 templateUrl: './XXX.component.html',
 styleUrls: ['./XXX.component.scss']
})
export class XXXComponent implements OnInit {
 constructor(
   public _DataService: DataService
 ) {}
 ngOnInit(): void {
   console.log(this._DataService.name); // 得到 Cindy 值
 }
}

參考來源

Angular：如何在多个组件之间通信
Angular：在元件之間傳遞資料的4種方式