角组件交互问题

Question

角度组件交互问题。数据无法从HTML传递到ts组件。我正在使用Angular 7。

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<app-test [parentData]="name"></app-test>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'component-interaction';
  public name = "Vishwas";
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.component.ts

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

@Component({
  selector: 'app-test',
  template: `<h2>{{"Hello "+ parentData}}</h2>`,
  styleUrls: []
})
export class TestComponent implements OnInit {

  @Input() public parentData;

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

同时删除父级和子级component.ts中的public关键字，效果应该很好

  public name = "Vishwas"; // public not necessary 

  @Input() public parentData;  //public not necessary

您没有在测试组件中的任何地方访问parentData。还要添加一个ngIf，以检查仅在父级中可用时才可访问的数据，

<app-test *ngIf="name" [parentData]="name"></app-test>

只需在ngOnInit（）中添加一个console.log，看看其是否正常工作

 ngOnInit() {
  console.log(this.parentData);
 }

Answer 2

在此链接https://stackblitz.com/edit/angular-6tmcn5中检查您的答案。 我认为附近存在格式问题：

`template: <h2>{{"Hello "+ parentData}}</h2>`,

我只是将代码重新编码到此。

template: `<h1>Hello {{parentData}}!</h1>`

检查下图。

Answer 3

首先您删除public：

@Input() parentData: string; and set name = "Vishwas";

和

<app-test [parentData]="name"></app-test>