如何以角度將數據從一個組件傳遞到另一個組件（新瀏覽器選項卡）？

Question

我是 angular 的新手，我不知道如何使用路由器在兩個組件之間傳遞數據。 這是我的第一個組件視圖，

當我按下查看報告按鈕時，我需要使用第一個組件數據調用另一個組件。 這是我的第一個組件視圖報告單擊按鈕代碼。

<button type="button" (click)="onFuelViewReport()"  class="btn btn-success ">
     <b>view Report</b>
</button>

單擊按鈕時，它會調用第一個組件中的 onFuelViewReport() 函數，並使用此函數打開帶有新瀏覽器窗口（選項卡）的第二個組件視圖。 我想要的是從這里將數據從第一個組件傳遞到第二個組件。 請幫我做這件事。

onFuelViewReport() {
    this.router.navigate([]).then(result => {
      window.open("/pages/view-report", "_blank");
    });
  }

Answer 1

如果你想從子組件到父組件共享數據，你可以使用@Output 事件發射器，或者如果你試圖在不相關的組件中共享數據，你可以使用 BehaviourSubject（這也適用於父到子組件通信的情況，反之亦然）反之）。

Child to Parent：通過 Output() 和 EventEmitter 共享數據

父組件.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}

子組件.ts

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hola Mundo!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}

不相關的組件：與服務共享數據

數據服務.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}

父組件.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-parent',
template: `
{{message}}
`,
styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}

兄弟組件.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Sibling")
}
}

Answer 2

window.open看起來非常糟糕。 使用this.router.navigate(['/heroes']); .

因此，如果我理解正確，您有一個項目列表，當您單擊其中一個項目時，該項目的詳細信息頁面應該打開嗎？

最佳實踐是允許詳細路由具有要設置的屬性。 Angular Routing & Navigation頁面非常完整。 它表明您應該使用:id - { path: 'hero/:id', component: HeroDetailComponent } 。 當您打開詳細信息頁面時，您將獲得 id 變量，然后獲得它的數據。