Question

我是Angular的新手，我尝试使用可用的选项，但我坚持使用父级的templateUrl共享数据，下面是代码段

header.component.html代码

callback(getResponse.message)

-header.component.ts文件代码

<header><label>{{childMessage}}</label></header>

-header.component.html代码

import { Component, OnInit, Input  } from '@angular/core'; 
import { HttpClientModule, HttpClient, HttpHeaders } from '@angular/common/http';
import{AppComponent} from '../app.component';

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

})

export class HeaderComponent implements OnInit {
  @Input() childMessage: String;
 //@ViewChild(AppComponent,{static:false}) child;

}

-app.component.html代码

<header>
    <ul>
        <li class="nav-item">
            <label>{{  childMessage }}</label>
        </li>
    </ul>
</header>

-到目前为止，对我而言，好的问题开始于以下代码片段，该代码片段应如何将childMessage传递给header.component.ts 我在互联网上看到的示例或解决方案在模板中：'' 但这在我的场景中不使用，否则会有不同的方式从父母到孩子共享数据 --app.component.ts代码

<app-header></app-header>
<div *ngIf="IsLogin==0" style="text-align: center;padding-top: 10%;">
<h1>App component html code is here </h1>   <
</div>

请帮助我摆脱困境，这里我是Angular的新手

Answer 1

<app-header [childMessage]="childMessage"></app-header>
<div *ngIf="IsLogin==0" style="text-align: center;padding-top: 10%;">
<h1>App component html code is here </h1>   <
</div>

尝试

Answer 2

代码的问题之一是您已将子组件中的字符串childMessage初始化为 String ，这不是打字稿中的声明类型。正确的方法是将小写字母用作string。

Answer 3

您必须使用以下子组件标签中所述的属性绑定将数据从父级传递给子级-

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

使用@Input在组件之间共享数据

3 个答案: