Question

我有两个组成部分。一个对象将被添加到Component2内部的数组中。在smae方法中，该对象必须传递到Component1内部的数组。

我尝试了@Input和服务，并从这里找到的解决方案中获取帮助。但是，这些正在创建组件的新实例。该数组将被重置，而不是将新对象推入其中。

解决方法是什么？无法弄清楚如何正确使用@Input和router-outlet。

通用解决方案将非常有帮助。谢谢。

Answer 1

如果要通过路由器传递数据，则可以使用NavigationExtras传递数据。

import { NavigationExtras, Router } from '@angular/router';
// all the code we know here
export class AnyComponent {

constructor(private router: Router) { }

  passData(data) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
      passedData: data
      };
      this.router.navigate(['whereUGo'], navigationExtras);
  }
}

然后使用激活的路线捕获其他组件。

https://angular.io/api/router/NavigationExtras

这是信息。

Answer 2

您可以通过service利用组件交互。

组件A：

@Component({
  selector: 'app-a',
  template: `
    <h1>A</h1>
    <p *ngFor="let item of dat">{{item}}</p>
    <button type="button" (click)="addNumber()">Add Number</button>
  `,    
})
export class AComponent implements OnInit {

  dat: Array<number> = [1, 2, 3];
  count: number;
  constructor(private service: AppService){}

  ngOnInit(){
    this.count = 3;
  }

  addNumber(){
    this.count++;
    this.dat.push(this.count);
    this.service.addNewValue(this.count);
  }
}

组件B：

@Component({
  selector: 'app-b',
  template: `
    <h1>B</h1>
    <p *ngFor="let item of dat">{{item}}</p>
  `,    
})
export class BComponent {
  dat: Array<number> = [1, 2, 3];
  subscription: Subscription;

  constructor(private service : AppService){
    this.subscription = this.service.newValue$.subscribe((res)=>{
      this.dat.push(res);
    })
  }
}

服务：

export class AppService {

  private newValue = new Subject<number>();
  newValue$ = this.newValue.asObservable();

  constructor(private http: HttpClient) { }

  // Service message commands
  addNewValue(value: number) {
    this.newValue.next(value);
  }
}

演示：Stackblitz

如何在不创建新实例的情况下将数据从Angular中的一个组件传递到另一个组件？

2 个答案: