从父组件到子组件的角度传递数据？答案

【问题标题】：Angular passing data from parent to child component?从父组件到子组件的角度传递数据？
【发布时间】：2021-08-31 13:01:19
【问题描述】：

我正在尝试传递从用户的下拉列表中选择的数据值。我有一个父组件 (app.component.html) 和子组件 (hello.component.html & hello.component.ts)。

根据选择的选项值，我想将值从父组件传递给子组件。到目前为止，我认为我所做的一切都是正确的。我可以知道为什么它不起作用吗？目前，浏览器提示“编译失败”。

app.component.html

    <h2> Course Details </h2>
    Select a course to view 
    <select #course (change)="name = course.value">
        <option value="Node JS">Node JS</option>
        <option value="Typescript">Typescript</option>
        <option value="Angular">Angular</option>
        <option value="React JS">React JS</option>
        </select><br/><br/>
    <app-hello [cName]="name"></app-hello>

    <router-outlet></router-outlet>

hello.component.ts

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

    @Component({
      selector: 'app-hello',
      templateUrl: './hello.component.html', // templateUrl property is used to bind external template file with the component
      styleUrls: ['./hello.component.css']
    })
    export class HelloComponent implements OnInit {

      courses = [
        { courseId: 1, courseName: "Node JS" },
        { courseId: 2, courseName: "Typescript" },
        { courseId: 3, courseName: "Angular" },
        { courseId: 4, courseName: "React JS" }
      ];
      
      @Input() 
      cName: any;

      constructor() { 
        
      }

      ngOnInit(): void {
      }

    }

hello.component.html

    <table border="1" *ngIf="cName">
        <thead>
          <tr>
            <th>Course ID</th>
            <th>Course Name</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let c of courses">
            <td *ngIf="c.courseName == cName">{{c.courseId}}</td>
            <td *ngIf="c.courseName == cName">{{c.courseName}}</td>
          </tr>
        </tbody>
    </table>

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

问题可能在于name 在您的app.component.ts 中是如何定义/更新的，而这在您的示例中未显示。

尝试更新(change) 输出以调用app.component.ts 中的公共方法，然后更新该方法中name 的值。还要确保 name 在您的 TS 文件中定义了一个值。

app.component.ts

public name = '';

public updateName(newName:string){
  this.name = newName;
}

app.component.html

<select #course (change)="updateName(course.value)">

【讨论】：

【解决方案2】：

问题出在下面一行，因为它没有在任何地方声明，所以不能在模板中使用：

<select #course (change)="name = course.value">

您应该有一个更改事件的函数，然后使用组件变量来存储并将值传递给子组件，如下所示：

app.component.html

<select #course (change)="updateCourse(course.value)">
<app-hello [cName]="courseName"></app-hello>

app.component.ts

let courseName: string;
updateCourse(name) {
   this.courseName = name
}

【讨论】：

【解决方案3】：

我不确定您的代码“编译失败”是什么问题，但我尝试在 stackblitz 中重现您的代码，效果很好。

可能是你没有在模块中声明路由？

RouterModule.forRoot(appRoutes)

工作链接https://stackblitz.com/edit/angular-ivy-brewfe

【讨论】：

我忘记在模块中声明 Route。谢谢！以下解决方案也可以正常工作。