在Angular 9中，从一个组件到另一个组件的变量不工作。

Question

我是在 Angular 9.1.3.

我有两个组件 admin 和 header.我必须将变量从admin打印传递到header组件。但是说这个变量是 undefined.

我的管理组件。admin.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {
  access_token:any;
  userdata: any;
  userName: any;
  parentMessage:any;
  constructor(private authService: AuthService, private router: Router) { }
  ngOnInit() {
    this.getetUser();
    this.parentMessage = "message from Admin";
  }
  }

我的头部组件：header.component.ts header.component.ts

import { Component, OnInit, Input  } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { AdminComponent } from '../admin/admin.component';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  @Input("parentMessage") modifiedName;
  ngOnInit() {
    console.log("This is the admin data "+ this.modifiedName); //This is the admin data undefined
  }
}

Answer 1

你需要通过HTML将变量从父组件传递到子组件。

在admin.component.html中

    <app-header [parentMessage]="parentMessage"></app-header>