angularV4+学习笔记

，这个规则和选择器匹配规则一致，也可以是类选择器，根据实际场景使用。（在Ideal中引入TSLint后程序可以正常运行，但是编辑器会警告并提示消除警告方案）例如：@Component({selector:'.app-single-component',template:``})templdate/templdateUrl:template/templdateUrl:模板的具体html模板/模板路径组件，template为模板，templateUrl为模板路径。模板支持es6反引号多行书写，templatedateUrl用于配置html模板的路径。注意：Typescript中只允许有一个构造函数，这也是它和es6的区别inputs/output：输入/输出组件中的输入和输出，可以理解为，数据输入组件，数据输出从组件到父组件。输入使用方法：[变量名]，在父元素页面中使用，@Input()，在子组件类中使用，代码示例如下：single-component.component.ts@Component({selector:'app-single-component',template:``})exportclassSingleComponentComponentimplementsOnInit{@Input()name:string;ngOnInit(){}}应用程序组件。ts@Component({selector:'app-root',template:``})导出类AppComponent{简单：字符串；constructor(){this.simple='我的世界';}}其中input作为@Component的元数据，那么还有另一种写法，后面的输出也符合其中一种代码@Component({selector:'app-single-component',inputs:['name'],template:``})输出用法：输出方式可能是使用broadcast/subscribe比较合适。single-component.component.ts改为@Component({selector:'app-single-component',template:``})exportclassSingleComponentComponentimplementsOnInit{value:string;@Input()名称：字符串；@Output()表情符号：EventEmitter;ngOnInit(){}constructor(){this.value='来自组件的值';this.emotter=newEventEmitter();}sendMessage():void{this.emotter.emit(this.value);}}app.component.ts更改@Component({选择器：'app-root'，模板：`

`})exportclassAppComponent{simple:string;constructor(){this.simple='我的世界';}getComponentData(message:string):void{console.log(`获取子组件中的值：${message}`);}}host：用于配置元素行中的元素属性值作为json对象的key-value，以及该函数仅在当前组件内部起作用。经常用来添加class.styleUrls：级联样式表url，值位数组，可以传多个，当然是必须的，在需要用到的组件的module中引入：@NgModule({declarations:[AppComponent,SingleComponentComponent//Importedinstructions,puttheminthedeclaration],imports:[BrowserModule//Importedmodules],providers:[],bootstrap:[AppComponent]//引导应用程序的根组件})exportclassAppModule{}@component的元数据还不完善，后续会继续完善。源码git地址