Angular2 Passing data between parents and children: local variables get subclasses

You can implement passing data via @Input and @Output , but you can’t get attributes of class and methods of subtasks. in addition to

Step 1: Define subcomponents:

Childencomponent.ts (child component)

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

@Component({
selector: 'app-childen',
  templateUrl: './childen.component.html',
  styleUrls: ['./childen.component.css']
})
export class ChildenComponent {
fun1() {
alert('Sub -Component Method');
  }
}

(1).definition in the subcomponentfun 1 ()The method provided to call the parent component

Step 2: Determine the main component
Parentcomponent.ts (the main component)

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

@Component({
selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
}

ParentComponent. html

<div class="parent_div">
  <p>Родительский компонент</p>
  <div>
    <input type="button" value="Вызовите метод субъекта" (click)="chiden.fun1()">
  </div>
  <! --- Подмодульная инструкция начала->
  <app-childen #chiden></app-childen>
  <! --- Инструкция подмодуля END->
</div>

Make a variable through # so that a local variable is created in the parent component template to get an instance of the child component by calling the method and attributes in the child task. In the above example, after defining #Chiden, click the anchor method to call the child component.

Look at the effect: Click the button to invert the sub-component component methodWarning(‘subcomponent method“);

Personal learning experience, passing through the great god, don’t spray it if you don’t like it
If you have any questions, please add my question on WeChat or leave a message