Angular4 commonly used code

Parent component passes value to child component

1. In the first sub-assembly is introduced into the @input () childVaule (data sub-assembly for use)
2. Then parent components incorporated component
   <App-somthing [childValue] = " fatherValue "> <-something App />
   fatherValue (value of parent element subassembly give pass) (right side)

Child component passes value to parent component (parent component listens to child component to pass value)

<app-somthing (childOuter)=“getChildModal($event)”></app-something>

1. The getChildModal ($ event) method (on the right) is the method of monitoring the child component in the parent component. $ event can get the value passed by the child component
2. Define @ Output () private childOuter = new EventEmitter () in the child component ;
3. this.childOuter.emit ('value'); Child component passes value to parent component

Use @viewChild parent component to use child components

<app-somthing #appModalTpl (childOuter)=“getChildModal($event)”></app-something>

1. In subassembly defined on # appModalTpl , the parent components defined in @ ViewChild ( 'appModalTpl') appModalTpl;
2. this.appModalTpl method of using subcomponents

Add dynamic class

[ngClass]="{‘bt_bg’:isShow,‘con_bg’:item === 0}"

Global tips

import {NzMessageService} from 'ng-zorro-antd';
private message: NzMessageService
this.message.create ('warning', 'Please fill in all information!');

a tag

<a [routerLink]="['/Root Directory']"> Link