资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/angularV4+学习笔记

angularV4+学习笔记

LoftySoul / 986人阅读

摘要：注解的元数据选择器页面渲染时，组件匹配的选择器使用方式采用标签的方式。当然必要的，在需要用到的的模块中引入引入的指令，放在声明里面引入的模块引导应用的根组件关于的元数据还未完全，所以后面会继续完善。

angular学习笔记之组件篇

1注解 1.1组件注解

@Component注解，对组件进行配置。

1.1.1注解@Component的元数据

selector

template/templateUrl

inputs/outputs

host

styleUrls

selector:选择器

页面渲染时，Angular组件匹配的选择器,

使用方式：

采用html标签的方式。
在《Angular权威教程》中，说明另外一种，

,这种规则与选择器匹配规则一致，也可以为class选择器，根据实际场景而用。（在Ideal中引入TSLint后，程序能够正常运行，但是编辑器会警告，并提示消除警告方案）

例如：

@Component({
  selector: ".app-single-component",
  template: `
  

    这个是子组件 ：{{name}}
    
  

  `
})
templdate/templdateUrl：模版/模版路径

组件具体的html模版，template为模版，templateUrl为模版的路径。
template中支持es6的反引号，进行多行编写，templdateUrl用于配置html模版的路径。

注意：在Typescript中的构造函数只允许有一个，这也是它与es6的一个区别

inputs/output:输入/输出

组件中的输入与输出，可以理解为，数据输入到组件中，数据从组件中输出到父组件中。

输入使用方式:[变量名]，在父元素页面中使用，@Input()，在子组件class中使用,代码例子如下：

single-component.component.ts 
@Component({
      selector: "app-single-component",
      template: `
          

            这个是子组件 ：{{name}}
          

          `
        })
export class SingleComponentComponent implements OnInit {

  @Input () name: string ;

  ngOnInit () {
  }

}
app.component.ts 
@Component({
  selector: "app-root",
  template: `
    

      
  

  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = "我的世界";
  }
}

其中input作为@Component的元数据，那么还有另外一种写法，之后的输出也一致

其中一段代码

@Component({
  selector: "app-single-component",
  inputs:["name"],
  template: `
  

    这个是子组件 ：{{name}}
  

  `
})

输出使用方式：输出的方式或许用广播/订阅来说更加合适。

single-component.component.ts改 
@Component({
  selector: "app-single-component",
  template: `
  

    这个是子组件 ：{{name}}
    
  

  `
})
export class SingleComponentComponent implements OnInit {

  value: string;
  @Input () name: string ;
  @Output() emotter: EventEmitter;

  ngOnInit () {
  }

  constructor () {
    this.value = "来源于组件的值";
    this.emotter = new EventEmitter();
  }

  sendMessage (): void {
    this.emotter.emit(this.value);
  }

}
app.component.ts改 
@Component({
  selector: "app-root",
  template: `
    

      
  

  `
})
export class AppComponent {
  simple: string;

  constructor () {
    this.simple = "我的世界";
  }

  getComponentData (message: string): void {
     console.log(`获取到子组件中的值：${message}`);
  }
}
host:用于在元素行配置元素属性

值为json对象key-value，并且作用只做作用于当前组件内部，常用来添加class.

styleUrls:层叠样式表url，值位数组，可以传多个。

当然必要的，在需要用到的component的模块中引入：

@NgModule({
  declarations: [
    AppComponent,
    SingleComponentComponent // 引入的指令，放在声明里面
  ],
  imports: [
    BrowserModule // 引入的模块
  ],
  providers: [],
  bootstrap: [AppComponent] //引导应用的根组件
})
export class AppModule { }

关于@component的元数据还未完全，所以后面会继续完善。

源代码git地址

海外云主机 服务器托管 学习笔记 学习笔记一 基础学习笔记 深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52623.html

相关文章

  • angularV4+学习笔记

    摘要：注解的元数据选择器页面渲染时，组件匹配的选择器使用方式采用标签的方式。当然必要的，在需要用到的的模块中引入引入的指令，放在声明里面引入的模块引导应用的根组件关于的元数据还未完全，所以后面会继续完善。 angular学习笔记之组件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1组件注解 @Component注解，对组件进行配置。 1....

    galaxy_robot 评论0 收藏0

  • ApacheCN 人工智能知识树 v1.0

    摘要：贡献者飞龙版本最近总是有人问我，把这些资料看完一遍要用多长时间，如果你一本书一本书看的话，的确要用很长时间。为了方便大家，我就把每本书的章节拆开，再按照知识点合并，手动整理了这个知识树。 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1760&h=200); 贡献者：飞龙版...

    刘厚水 评论0 收藏0

  • 【LNMPR源码学习】笔记汇总

    摘要：此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考整理与心得体会，此文会不断更新视频传送门每日学习记录使用录像设备记录每天的学习源码学习源码学习内存管理笔记源码学习内存管理笔记源码学习内存管理笔记源码学习基本变量笔记 此文用于汇总跟随陈雷老师及团队的视频，学习源码过程中的思考、整理与心得体会，此文会不断更新 视频传送门：【每日学习记录】使用录像设备记录每天的学习 PHP7...

    Barrior 评论0 收藏0

发表评论

登陆后可评论

0条评论

LoftySoul

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<