0

我是 Angular 的新手，遇到了一些问题，希望你能帮助我。所以我试图将一个变量的值从 ProjectComponent 共享到 AcceuilComponent ，这个变量的值正确显示到我的 acceuil.component.html 但是当我尝试将它用于我的 acceuil.component.ts 它是未定义的！

project.component.html (the parent component)

 <app-header-in></app-header-in>

<ng-sidebar-container>

    <ng-sidebar [opened]="opened">
        <p> Sidebar </p>
        <button (click)="Sidebar()">
            Close Sidebar
        </button>
        <ul class="menu">
            <li class="hh"
            *ngFor="let project of projects"
            [class.selected]="project === selectedProject"
            (click)="onSelect(project)">
            {{project.nomprojet}}</li>
        </ul>
    </ng-sidebar>

    <div ng-sidebar-content >
    <br><br><br><br>
        <button (click)="Sidebar()">
            Open Sidebar
        </button>
        
        <app-acceuil [message]="idProject"></app-acceuil>
      
     </div>
</ng-sidebar-container>

project.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import {ProjectService} from '../project.service';
import {PartService} from '../part.service';

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {

  opened=true;
  projects:any;
  idProject;
  selectedProject;
 
  constructor(private projectService:ProjectService) { }

  ngOnInit(): void {
    this.projectService.getProjects().subscribe((result)=>{console.log("result",result) 
    this.projects=result})
  }
  Sidebar(){
    this.opened=!this.opened;
  }
  onSelect(pro): void {
      this.idProject = pro.id;
  }


}

acceuil.component.html (my child component)

    <p>{{message}}</p>
<ul >
    <li class="hh"
        *ngFor="let part of parts">
        {{part.nomparti}}
    </li>
</ul>

acceuil.component.ts


import { Component, OnInit,Input } from '@angular/core';
import { ApiService } from '../api.service';
import {PartService} from '../part.service';



@Component({
  selector: 'app-acceuil',
  templateUrl: './acceuil.component.html',
  styleUrls: ['./acceuil.component.css']
})


export class AcceuilComponent implements OnInit {

    
    @Input() message;
    parts:any;

    constructor(private partService:PartService) {
        
     }

    ngOnInit(): void{
        
        console.log("id",this.message);
        this.partService.getPartsFromIdProject(this.message).subscribe((result)=>{console.log("result",result) 
        this.parts=result})
    } 

    ngOnChanges() {
        if(this.message) {
        console.log(this.message)
    }
}

}

我正在使用消息来调用服务并显示数据。在 acceuil.component.html<p>{{message}}</p>中显示正确，但console.log("id",this.message);在 acceuil.component.ts 中显示未定义

4

1 回答 1

0

由于 message 是一个输入属性，您需要在 ngOnchanges 生命周期中获取它的值。

第一次，当它在 ngOnChanges 中时，输入值将是未定义的。因此，为了安全起见，最好添加一个检查未污染的条件，如下所示

ngOnChanges(changes: SimpleChanges) {
  if (changes.message) {
    // Should be defined now
    console.log(this.message);
  }
}
于 2020-08-08T18:31:54.197 回答