Question

我是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>正确显示，但acceuil.component.ts中的console.log("id",this.message);显示未定义

Answer 1

由于消息是一种输入属性，因此需要在ngOnchanges生命周期中获取消息的值。

第一次使用ngOnChanges时，输入值将不确定。因此，为了安全起见，最好添加如下所示的未取消污染条件的支票

ngOnChanges(changes: SimpleChanges) {
  if (changes.message) {
    // Should be defined now
    console.log(this.message);
  }
}

@input变量的角度未定义值

1 个答案: