Angular8 Getting -3 create components

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