五种方式
1. @input
把父组件中的值传递到子组件中，子组件声明变量时，前面用@input装饰器。
例子1：
子组件中
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: '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;
}
父组件中
import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
selector: 'hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</hero-child> `
})
export class HeroParentComponent {
heroes = HEROES;
master: string = 'Master';
}
2. setter
结合@input可以实现对数据的get，set
例子2:
子组件中
import { Component, Input } from '@angular/core';
@Component({
selector: 'name-child',
template: '{{name}}'
})
export class NameChildComponent {
private _name = '';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
get name(): string { return this._name; }
}
父组件中
import { Component } from '@angular/core';
@Component({
selector: 'name-parent',
template: `
<h2>Master controls {{names.length}} names</h2>
<name-child *ngFor="let name of names" [name]="name"></name-child>
`
})
export class NameParentComponent {
// Displays 'Mr. IQ', '<no name set>', 'Bombasto'
names = ['Mr. IQ', ' ', ' Bombasto '];
}
这个例子中，子组件中定义了一个私有变量_name，接受父组件的name，且定义了name的get和set方法。通过set设置默认值，通过get返回定义的_name
3.声明周期钩子 ngOnChanges
监听属性的变化
例子3:
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
@Component({
selector: 'version-child',
template: `
<h3>Version {{major}}.{{minor}}</h3>
<h4>Change log:</h4>
<ul>
<li *ngFor="let change of changeLog">{{change}}</li>
</ul>
`
})
export class VersionChildComponent implements OnChanges {
@Input() major: number;
@Input() minor: number;
changeLog: string[] = [];
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
let log: string[] = [];
for (let propName in changes) {
let changedProp = changes[propName];
let to = JSON.stringify(changedProp.currentValue);
if (changedProp.isFirstChange()) {
log.push(`Initial value of ${propName} set to ${to}`);
} else {
let from = JSON.stringify(changedProp.previousValue);
log.push(`${propName} changed from ${from} to ${to}`);
}
}
this.changeLog.push(log.join(', '));
}
}
import { Component } from '@angular/core';
@Component({
selector: 'version-parent',
template: `
<h2>Source code version</h2>
<button (click)="newMinor()">New minor version</button>
<button (click)="newMajor()">New major version</button>
<version-child [major]="major" [minor]="minor"></version-child>
`
})
export class VersionParentComponent {
major: number = 1;
minor: number = 23;
newMinor() {
this.minor++;
}
newMajor() {
this.major++;
this.minor = 0;
}
}
在这个例子中,通过ngOnChanges监测了两个数据的变化,并在数据变化时,将数据打印到日志上.
一旦数据有变化,那么ngOnChanges就会执行,且变化的数据会进入到changes对象中.
4.EventEmitter
它是一个输出属性,所以通常带@Output装饰器
例子4
子组件
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'my-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)" [disabled]="voted">Agree</button>
<button (click)="vote(false)" [disabled]="voted">Disagree</button>
`
})
export class VoterComponent {
@Input() name: string;
@Output() onVoted = new EventEmitter<boolean>();
voted = false;
vote(agreed: boolean) {
this.onVoted.emit(agreed);
this.voted = true;
}
}
父组件
import { Component } from '@angular/core';
@Component({
selector: 'vote-taker',
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<my-voter *ngFor="let voter of voters"
[name]="voter"
(onVoted)="onVoted($event)">
</my-voter>
`
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
}
}
(onvoted)='onvoted($event)'中的(onvoted)对应子组件中的@Output() onVoted = new EventEmitter<boolean>();通过this.onVoted.emit(agreed);触发, onvoted($event)对应父组件的onvoted方法.$event为传递参数的一个媒介
5.本地变量
用该方法可以在父组件中读取子组件中的属性以及方法
例子:5
父组件中
...
template:`
<child #ch></child>
<button (click)='ch.test'>test<button>
`
...
子组件中
import { Component } from '@angular/core';
@Component({
selector:'child'
...
})
export class childComponent{
test(){
console.log(' this is a test')
}
}
通过这个方法,可以在父组件中,读取子组件内的方法
6.@viewchild()
例子6
import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { A } from './A';
@Component({
...
})
export class B implements AfterViewInit{
@ViewChild(A)
private aa: A;
start(){
this.aa.start()
}
}
将子组件作为viewchild 注入到父组件中,就可以通过该对象读取A组件里的方法以及属性
7.通过服务
import { Injectable } from '@angular/core';
通过此编写服务,在两个组件内都引入,那么就可以同时使用这个实例,个人理解为一个仓库,组件类似使用者,通过构造方法注入后,那么就可以使用它
