Question

我有一个具有以下模板的组件

<div> This is A component </div>
    <router-outlet></router-outlet>

如果我使用url

site.com/A/B

然后对角分量加载A分量，并将B放入A的模板中。

一个组件具有：

export class SettingsComponent implements OnInit {
  someVar;

 ngOnInit() {
this.someVar = "TEST"

启动B组件时如何获取此变量？

编辑，我不想为每个服务使用服务，因为我从API获得了该测试。而且我想我会用这样的请求将服务器加载两次。与其相反，我只想获得一次。像在此示例中一样，假设我从服务器获得答复并将其放入this.someVar = "TEST"中，因此第二个组件应仅使用第一个组件数据而不接触后端服务器API。

Answer 1

使用共享服务

工作示例：https://stackblitz.com/edit/angular-fgut7t

服务：

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
    providedIn: "root"
})
export class DataService {

  dataUpdated:EventEmitter<any> = new EventEmitter();

  constructor() { }

  setLatestData(data) {
    this.dataUpdated.emit(data);
  }

}

孩子：

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../data-service.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() allData: [];
  latestData: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.dataUpdated.subscribe((data) => {
      this.latestData = data;
    });
  }

}

父母：

import { Component } from '@angular/core';
import { DataService } from './data-service.service'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  dataArr = [];

  constructor(private dataService: DataService){}

  onAddTimestamp() {
    let timestamp = new Date();
    this.dataArr.push(timestamp);
    this.dataService.setLatestData(timestamp);
  }

}

将数据从一个打字稿文件传递到另一个

1 个答案: