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'];    });  }}