Как передать данные из одного компонента в другой (вкладка «Новый браузер») в angular?

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 (Это также работает в случае родительского для дочернего компонента). связь и наоборот).

Дочерний к родителю: обмен данными через Output () и EventEmitter

parent.component.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
}
}

child.component.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)
}
}

Несвязанные компоненты: обмен данными со службой

data.service.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)
}
}

parent.component.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)
}
}

sibling.component.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 Маршрутизация и навигация очень полная. Это показывает, что вы должны использовать :id - { path: 'hero/:id', component: HeroDetailComponent }. Когда вы открываете страницу сведений, вы получаете переменную id, а затем получаете данные для нее.