angular跨组件传值怎么实现

在Angular中，可以使用以下几种方法实现跨组件传值：

利用@Input和@Output装饰器：通过在子组件中使用@Input装饰器接收父组件传递的值，然后通过@Output装饰器将子组件的值传递给父组件。

父组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [childValue]="parentValue" (childEvent)="handleChildEvent($event)"></app-child>
  `
})
export class ParentComponent {
  parentValue: string;

  handleChildEvent(event: string) {
    console.log(event);
  }
}

子组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <input [(ngModel)]="childValue" (input)="childEvent.emit(childValue)">
  `
})
export class ChildComponent {
  @Input() childValue: string;
  @Output() childEvent = new EventEmitter<string>();
}

使用服务（Service）：创建一个共享的服务，将要传递的值存储在该服务中，然后在需要访问该值的组件中注入该服务。

共享服务：

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  sharedValue: string;
}

组件1：

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-component1',
  template: `
    <h1>Component 1</h1>
    <input [(ngModel)]="sharedService.sharedValue">
  `
})
export class Component1Component {
  constructor(public sharedService: SharedService) {}
}

组件2：

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-component2',
  template: `
    <h2>Component 2</h2>
    <p>{{ sharedService.sharedValue }}</p>
  `
})
export class Component2Component {
  constructor(public sharedService: SharedService) {}
}

使用路由参数：通过在URL中传递参数，不同组件之间可以通过路由参数进行通信。

路由配置：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Component1Component } from './component1.component';
import { Component2Component } from './component2.component';

const routes: Routes = [
  { path: 'component1/:value', component: Component1Component },
  { path: 'component2/:value', component: Component2Component },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

组件1：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-component1',
  template: `
    <h1>Component 1</h1>
    <p>Value: {{ value }}</p>
  `
})
export class Component1Component implements OnInit {
  value: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.value = params['value'];
    });
  }
}

组件2：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-component2',
  template: `
    <h2>Component 2</h2>
    <p>Value: {{ value }}</p>
  `
})
export class Component2Component implements OnInit {
  value: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.value = params['value'];
    });
  }
}

这些方法都可以实现跨组件传值，具体选择哪种方法

最新问答

相关标签