Dieses Mal werde ich Ihnen die Verwendung der Wertübertragung und Kommunikation zwischen Winkelkomponenten ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Wertübertragung und Kommunikation zwischen Winkelkomponenten? Werfen wir einen Blick darauf.
In diesem Artikel wird hauptsächlich vorgestellt, wie Angular Werte überträgt und in verschiedenen Komponenten kommuniziert. Es ist hauptsächlich in Eltern-Kind-Komponenten und Nicht-Eltern-Kind-Komponenten unterteilt.
Parameter und Kommunikationsmethoden zwischen übergeordneten und untergeordneten Komponenten
Ereigniskommunikation verwenden (EventEmitter, @Output):
Szenario: Die Kommunikation kann zwischen übergeordneten und untergeordneten Komponenten erfolgen und wird im Allgemeinen in untergeordneten Komponenten verwendet, um Nachrichten an übergeordnete Komponenten weiterzuleiten
Schritte:
Die untergeordnete Komponente erstellt ein EventEmitter-Ereignisobjekt und stellt es mithilfe von @output bereit. -
Die übergeordnete Komponente lauscht auf die Methode der untergeordneten Komponente @output und verarbeitet dann das Ereignis.
// 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);
}
}Nach dem Login kopieren
Verwenden Sie @ViewChild und @ViewChildren:
Szenario: Wird im Allgemeinen für übergeordnete Komponenten verwendet, um Informationen an untergeordnete Komponenten weiterzuleiten, oder für übergeordnete Komponenten, um Methoden von untergeordneten Komponenten aufzurufen
Schritte:
Verwenden Sie die untergeordnete Komponente
- in der übergeordneten Komponente, um das untergeordnete Komponentenobjekt mithilfe von @ViewChild abzurufen.
- Die übergeordnete Komponente verwendet das untergeordnete Komponentenobjekt, um die untergeordnete Komponente zu manipulieren (Informationen weiterzugeben oder Methoden aufzurufen).
Code:
Parameterübergabe und Kommunikationsmethoden für Nicht-Eltern-Kind-Komponenten
// 子组件
@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);// 父组件获得子组件属性
}
}Nach dem Login kopieren
Übergeben Sie Routing-Parameter
Szenario: Eine Komponente kann durch Routing zu einer anderen Komponente springen, z. B.: Auflisten und Bearbeiten
Schritte:
Komponente A verwendet routerLink oder router.navigate oder router.navigateByUrl, um zu Komponente B zu springen
- Komponente B akzeptiert diese Parameter
Diese Methode ist nur für die Parameterübertragung geeignet. Sobald die Parameter zwischen Komponenten empfangen werden, ändern sie sich nicht
Versandart
routerLink
router.navigate
<a routerLink=["/exampledetail",id]></a>
routerLink=["/exampledetail",{queryParams:object}]
routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];Nach dem Login kopieren
router.navigateByUrl
this.router.navigate(['/exampledetail',id]);
this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});Nach dem Login kopieren
Nachdem der Parametersender die Parameter übergeben hat, verfügt der Empfänger über zwei Empfangsmethoden:
Schnappschuss
this.router.navigateByUrl('/exampledetail/id');
this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});Nach dem Login kopieren
queryParams
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'];
};
}Nach dem Login kopieren
Verwenden Sie den Dienst zur Kommunikation, das heißt: Zwei Komponenten injizieren gleichzeitig einen Dienst
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'];
});
};Nach dem Login kopieren
Szenario: Die beiden Komponenten, die kommunizieren müssen, sind natürlich keine übergeordneten und untergeordneten Komponenten, sondern können auch beliebige Komponenten sein.
Schritte:
Erstellen Sie einen neuen Dienst, und Komponente A und Komponente B injizieren den Dienst gleichzeitig.
- Komponente A erhält Daten vom Dienst oder möchte, dass der Dienst Daten überträgt
- Komponente B erhält Daten vom Dienst. Der Dienst erhält Daten oder möchte, dass der Dienst Daten überträgt.
Code:
Nachrichtendienstmodul
// 组件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发送消息
}
}Nach dem Login kopieren
Szenario: Hierbei handelt es sich um ein Projekt, bei dem alle Komponenten kommunizieren können müssen oder eine Komponente mit mehreren Komponenten kommunizieren muss und Parameter nicht per Routing übergeben werden können.
Entwurfsmethode:
Verwenden Sie RxJs, um ein Dienstmodul MessageService zu definieren, und alle Informationen werden beim Dienst registriert.
- Wenn eine Nachricht gesendet werden muss, rufen Sie die Methode des Dienstes auf; >
Wird dort verwendet, wo Informationen empfangen werden müssen. Rufen Sie die Methode zum Empfangen von Informationen auf, rufen Sie ein Abonnementobjekt ab und überwachen Sie dann die Informationen.
Natürlich, wenn jede Komponente zerstört wird ,
-
Code:
-
Der MessageService entspricht hier der Verwendung des Broadcast-Mechanismus zur Übertragung von Informationen zwischen allen Komponenten, unabhängig davon, ob es sich um eine Zahl, eine
Zeichenfolge oder ein Objekt handelt , und auch hier erfolgt die Ausbreitung sehr schnell.
this.subscription.unsubscribe();
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
// 消息中专服务
@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(‘我发消息了，你们接受下'); // 发送信息消息
}Nach dem Login kopieren
Detaillierte Erläuterung der Schritte der js-Kapselungsoperationsklasse
Wie man mit dem ungültigen Tag selected="selected"-Attribut umgeht
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Wertübertragung und Kommunikation zwischen Winkelkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
