1, use the command to create a login component
g login component
2, the direct generation component
3, the component is automatically added to a position defined
4, the following is the key
<div class="header" (click)="test()">{{info}}</div> <app-login><app-login> <router-outlet></router-outlet>
Pay attention to, and custom components to be here in the same selector
Do not write <Login>
5, to add a custom property
6, modify the login page
<p>{{info}}</p>
7, now modify subassemblies status by clicking on the parent component, use ViewChild way
import { Component, ViewChild } from '@angular/core'; import { LoginComponent } from './login/login.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'], }) export class AppComponent { @ViewChild(LoginComponent) // 使用viewChild导入引用 private loginComponent: LoginComponent; // 将子组件注入到私有属性 title = 'ngstudy'; info="hello world1"; @ViewChild('app-login') login: any; test() { this.info="hello world2"; console.log(this.login); this.loginComponent.info="已登录"; } }
注意@ViewChild定义位置
8、现在点击HelloWorld