Angular 4祖孙组件传值：无需数据服务的其他实现方式及示例

Absolutely! You don’t need a dedicated data service to pass data from a grandparent to a child component in Angular. There are a couple of straightforward, service-free approaches you can use—let’s walk through them with concrete examples:

1. 逐层通过@Input传递（最推荐） #

This is the most intuitive and Angular-idiomatic way. Even though it requires passing data through the parent component, if the parent only acts as a "middleman" (no need to process the data), it’s super simple.

Grandparent Component #

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

@Component({
  selector: 'app-grandparent',
  template: `
    <!-- Pass API data to parent via @Input -->
    <app-parent [grandparentData]="fetchedApiData"></app-parent>
  `
})
export class GrandparentComponent implements OnInit {
  fetchedApiData: any;

  ngOnInit() {
    // Simulate API call to fetch data
    this.fetchedApiData = { id: 42, content: "Hello from grandparent's API!" };
  }
}

Parent Component #

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

@Component({
  selector: 'app-parent',
  template: `
    <!-- Pass the data along to the child -->
    <app-child [passedData]="grandparentData"></app-child>
  `
})
export class ParentComponent {
  // Receive data from grandparent
  @Input() grandparentData: any;
}

Child Component #

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

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <p>Data from grandparent's API: {{ passedData.content }}</p>
  `
})
export class ChildComponent {
  // Receive data from parent (originally from grandparent)
  @Input() passedData: any;
}

This approach keeps components loosely coupled and follows Angular's one-way data flow rules—perfect for most scenarios.

2. Directly Inject the Grandparent Component #

Angular's dependency injection system lets child components inject their ancestor components (as long as they're in the same injection tree). This lets the child directly access the grandparent's properties without passing data through layers.

Grandparent Component #

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

@Component({
  selector: 'app-grandparent',
  template: `
    <app-parent></app-parent>
  `
})
export class GrandparentComponent implements OnInit {
  fetchedApiData: any;

  ngOnInit() {
    this.fetchedApiData = { id: 42, content: "Hello from grandparent's API!" };
  }
}

Child Component #

import { Component, OnInit, Optional } from '@angular/core';
import { GrandparentComponent } from '../grandparent/grandparent.component';

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <p>Directly from grandparent: {{ grandparent?.fetchedApiData?.content }}</p>
  `
})
export class ChildComponent implements OnInit {
  // Inject grandparent component instance
  constructor(@Optional() public grandparent: GrandparentComponent) {}

  ngOnInit() {
    // You can also access the data here if needed
    console.log(this.grandparent?.fetchedApiData);
  }
}

The @Optional() decorator prevents errors if the child is ever used outside the grandparent's context. Note that this increases coupling between the child and grandparent—use this only if you're sure the child will always be nested under this specific grandparent.

3. ViewChild Chain (Not Recommended for Most Cases) #

You can use @ViewChild to reference the parent component from the grandparent, then reference the child from the parent, and directly assign data. This is tightly coupled and not ideal for most use cases, but it’s an option for edge scenarios.

Grandparent Component #

import { Component, OnInit, ViewChild } from '@angular/core';
import { ParentComponent } from '../parent/parent.component';

@Component({
  selector: 'app-grandparent',
  template: `
    <app-parent #parentRef></app-parent>
  `
})
export class GrandparentComponent implements OnInit {
  @ViewChild('parentRef') parentComponent!: ParentComponent;
  fetchedApiData: any;

  ngOnInit() {
    this.fetchedApiData = { id: 42, content: "Hello from grandparent's API!" };
  }

  ngAfterViewInit() {
    // Pass data directly to child via parent's reference
    this.parentComponent.childComponent.apiData = this.fetchedApiData;
  }
}

Parent Component #

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child #childRef></app-child>
  `
})
export class ParentComponent {
  @ViewChild('childRef') childComponent!: ChildComponent;
}

Child Component #

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

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <p>Data via ViewChild chain: {{ apiData?.content }}</p>
  `
})
export class ChildComponent {
  apiData: any;
}

Avoid this method unless you have no other choice—it creates strong dependencies between components, making them harder to reuse or refactor.

Final Recommendation #

Stick with the @Input chaining method for most scenarios—it’s clean, maintainable, and aligns with Angular's best practices. Use the ancestor injection method sparingly, only when chaining inputs becomes overly tedious for deep component trees.

内容的提问来源于stack exchange，提问作者Teodor