Components significance package:
We need to reuse or simplified logic.
Create a command-line command:
ng the Generate / G the Component / Components c / componentName.
ps: index.ts can be added manually introduced further facilitate assembly of the influence, and changes of the internal external isolation.
Directory structure is as follows:
-> components
index.ts
index.ts Code:
export * from './child'
->child
index.ts
index.ts Code:
export * from './child.component';
child.component.html
child.component.less
child.component.spec.ts
child.component.ts
Sons pass component values:
Pass values to the parent sub-assembly:
Parent Component Code:
app.component.ts
{from} the Component Import '@ Angular / Core';
@Component ({
Selector: 'the root-App',
templateUrl: './app.component.html',
styleUrls: [ './app.component.less']
} )
Export class AppComponent {
// userName parent component definitions to the traditional values subassembly
userName: String = 'ZS';
}
app.component.html
<div>
<-! binding properties in manner userName passed by reference to the subassembly subassembly tag -> <App-Child [User] = "userName"> </ Child-App> </ div>
Subassembly receiving codes:
child.component.ts
// subassembly incorporated inside Input, and then performs the variable @Input decorator received
Import {the Component, the OnInit, from the Input} '@ Angular / Core'; @Component ({ Selector: 'Child-App', templateUrl: '. /child.component.html ', styleUrls: [' ./child.component.less'] }) Export class ChildComponent the implements the OnInit { @input () User; constructor () {} ngOnInit () { } }
Pass to the parent sub-assembly Found:
Subcomponents Code:
child.component.ts
Introducing // Output, EvnentEmitter module, @Output instantiated through decorators EventEmitter
Import {the Component, the OnInit, the Output, EventEmitter} from '@ Angular / Core'; @Component ({ Selector: 'Child-App', templateUrl: '. /child.component.html ', styleUrls: [' ./child.component.less'] }) Export {class ChildComponent the implements the OnInit the userName: String = 'ZS'; // instantiate of EventEmitter --output () = new new childEvent of EventEmitter (); constructor () {} ngOnInit () { } the handleEvent () { mapped by the sub-assembly to emit userName method EventEmitter instance as a parameter this.childEvent.emit (this.userName) } }
child.component.html
<! - mapping triggering event in handleEvent subassembly, to the parent component passed by value ->
! <P (the Click) = 'handleEvent ()'> Child Works </ P>
Parent Component Code:
app.component.html
<div>
<-! parent components in the form of bound instances bound events subassembly EventEmitter triggered getChildEvent method, data transmitted through the transmission reference receiver subassembly -> <Child-App (childEvent) = " getChildEvent ($ Event) "> </ Child-App> </ div>
app.component.ts
{from} the Component Import '@ Angular / Core';
@Component ({
Selector: 'the root-App',
templateUrl: './app.component.html',
styleUrls: [ './app.component.less']
} )
Export class AppComponent {
getChildEvent (the userName) {
// print data transfer subassembly of
the console.log (the userName);
}
}