In diesem Artikel werden hauptsächlich die Methoden der Wertübertragung und Kommunikation zwischen verschiedenen Komponenten in Angular vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Parameter und Kommunikationsmethoden zwischen übergeordneten und untergeordneten Komponenten
Verwenden Sie die Ereigniskommunikation (EventEmitter, @Output):
Szenario : Ja Zur Kommunikation zwischen übergeordneten und untergeordneten Komponenten wird im Allgemeinen die untergeordnete Komponente verwendet, um Nachrichten an die übergeordnete Komponente weiterzuleiten.
Schritte:
Die untergeordnete Komponente erstellt ein Ereignis EventEmitter-Objekt und verwendet @output, um es verfügbar zu machen.
Die übergeordnete Komponente lauscht auf die @output-Methode der untergeordneten Komponente und verarbeitet dann das Ereignis.
Code:
// child 组件
@Component({
selector: 'app-child',
template: '',
styles: [``]
})
export class AppChildComponent implements OnInit {
@Output() onVoted: EventEmitter<any> = new EventEmitter();
ngOnInit(): void {
this.onVoted.emit(1);
}
}
// parent 组件
@Component({
selector: 'app-parent',
template: `
<app-child (onVoted)="onListen($event)"></app-child>
`,
styles: [``]
})
export class AppParentComponent implements OnInit {
ngOnInit(): void {
throw new Error('Method not implemented.');
}
onListen(data: any): void {
console.log('TAG' + '---------->>>' + data);
}
}Verwendung von @ViewChild und @ViewChildren:
Szenario: Wird im Allgemeinen für übergeordnete Komponenten verwendet, um Informationen an untergeordnete Komponenten zu übergeben, oder für übergeordnete Komponenten, um Methoden von untergeordneten Komponenten aufzurufen.
// 子组件
@Component({
selector: 'app-child',
template: '',
styles: [``]
})
export class AppChildComponent2 implements OnInit {
data = 1;
ngOnInit(): void {
}
getData(): void {
console.log('TAG' + '---------->>>' + 111);
}
}
// 父组件
@Component({
selector: 'app-parent2',
template: `
<app-child></app-child>
`,
styles: [``]
})
export class AppParentComponent2 implements OnInit {
@ViewChild(AppChildComponent2) child: AppChildComponent2;
ngOnInit(): void {
this.child.getData(); // 父组件获得子组件方法
console.log('TAG'+'---------->>>'+this.child.data);// 父组件获得子组件属性
}
}Durch Routing-Parameter
Szenario: Eine Komponente kann durch Routing zu einer anderen Komponente springen, z. B.: Auflisten und Bearbeiten
Schritte:
Code
Übertragungsmethode
routerLink
<a routerLink=["/exampledetail",id]></a>
routerLink=["/exampledetail",{queryParams:object}]
routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];this.router.navigate(['/exampledetail',id]);
this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});
this.router.navigateByUrl('/exampledetail/id');
this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});Snapshot
import { ActivateRoute } from '@angular/router';
public data: any;
export class ExampledetailComponent implements OnInit {
constructor( public route: ActivateRoute ) { };
ngOnInit(){
this.data = this.route.snapshot.params['id'];
};
}import { ActivateRoute } from '@angular/router';
export class ExampledetailComponent implements OnInit {
public data: any;
constructor( public activeRoute:ActivateRoute ) { };
ngOnInit(){
this.activeRoute.queryParams.subscribe(params => {
this.data = params['name'];
});
};Szenario: zwei Komponenten, die kommunizieren müssen Es handelt sich natürlich nicht um eine Eltern-Kind-Komponente oder eine benachbarte Komponente, es kann auch eine beliebige Komponente sein.
Schritte:
// 组件A
@Component({
selector: 'app-a',
template: '',
styles: [``]
})
export class AppComponentA implements OnInit {
constructor(private message: MessageService) {
}
ngOnInit(): void {
// 组件A发送消息3
this.message.sendMessage(3);
const b = this.message.getMessage(); // 组件A接收消息；
}
}
// 组件B
@Component({
selector: 'app-b',
template: `
<app-a></app-a>
`,
styles: [``]
})
export class AppComponentB implements OnInit {
constructor(private message: MessageService) {
}
ngOnInit(): void {
// 组件B获得消息
const a = this.message.getMessage();
this.message.sendMessage(5); // 组件B发送消息
}
}Szenario: hier Wenn es um ein Projekt geht, muss die Möglichkeit der Kommunikation zwischen allen Komponenten implementiert werden, oder eine Komponente muss mit mehreren Komponenten kommunizieren und Parameter können nicht durch Routing übergeben werden.
Entwurfsmethode:
this.subscription.unsubscribe();
// 消息中专服务
@Injectable()
export class MessageService {
private subject = new Subject<any>();
/**
* content模块里面进行信息传输，类似广播
* @param type 发送的信息类型
* 1-你的信息
* 2-你的信息
* 3-你的信息
* 4-你的信息
* 5-你的信息
*/
sendMessage(type: number) {
console.log('TAG' + '---------->>>' + type);
this.subject.next({type: type});
}
/**
* 清理消息
*/
clearMessage() {
this.subject.next();
}
/**
* 获得消息
* @returns {Observable<any>} 返回消息监听
*/
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
// 使用该服务的地方，需要注册MessageService服务；
constructor(private message: MessageService) {
}
// 消息接受的地方；
public subscription: Subscription;
ngAfterViewInit(): void {
this.subscription = this.message.getMessage().subscribe(msg => {
// 根据msg，来处理你的业务逻辑。
})
}
// 组件生命周期结束的时候，记得注销一下，不然会卡；
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
// 调用该服务的方法，发送信息；
send():void {
this.message.sendMessage(‘我发消息了，你们接受下'); // 发送信息消息
}
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung von Wertübertragungs- und Kommunikationsmethoden zwischen verschiedenen Komponenten in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
