angularV4+学习笔记

2018-07-12 admin

1注解

1.1组件注解

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

1.1.1注解@Component的元数据
  • selector
  • template/templateUrl
  • inputs/outputs
  • host
  • styleUrls

selector:选择器

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

使用方式:


<ip-address-form></ip-address-form>

采用html标签的方式。 在《Angular权威教程》中,说明另外一种,<div ip-address></div>,这种规则与选择器匹配规则一致,也可以为class选择器,根据实际场景而用。(在Ideal中引入TSLint后,程序能够正常运行,但是编辑器会警告,并提示消除警告方案)

例如:

@Component({
  selector: '.app-single-component',
  template: `
  <div>
    这个是子组件 :{{name}}
    <button (click)="sendMessage()" >点我</button>
  </div>
  `
})

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: `
          <div>
            这个是子组件 :{{name}}
          </div>
          `
        })
export class SingleComponentComponent implements OnInit {

  @Input () name: string ;

  ngOnInit () {
  }

}

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple"></app-single-component>
  </div>
  `
})
export class AppComponent {
  simple: string;

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

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

其中一段代码


@Component({
  selector: 'app-single-component',
  inputs:['name'],
  template: `
  <div>
    这个是子组件 :{{name}}
  </div>
  `
})

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

single-component.component.ts改

@Component({
  selector: 'app-single-component',
  template: `
  <div>
    这个是子组件 :{{name}}
    <button (click)="sendMessage()" >点我</button>
  </div>
  `
})
export class SingleComponentComponent implements OnInit {

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

  ngOnInit () {
  }

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

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

}

app.component.ts改

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-single-component [name]="simple" (emotter)="getComponentData($event)"></app-single-component>
  </div>
  `
})
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的元数据还未完全,所以后面会继续完善。

原文链接:https://segmentfault.com/a/1190000015617914

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35865.html

文章标题:angularV4+学习笔记

相关文章
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
Yarn v0.24.2 发布,新型 Javascript 包管理器
Yarn 是 Facebook 贡献 Javascript 包管理器,用于替代现有的 npm 客户端或者其他兼容 npm 仓库的包管理工具。Yarn 保留了现有工作流的特性,优点是更快、更安全、更可靠。 特性: 极速:Yarn 缓存它下载...
2017-05-08
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
javascript制作2048游戏
2048.html &lt;!DOCTYPE&gt; &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&gt; &lt;head&gt; ...
2017-03-22
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
本文实例讲述了JS简单获取当前日期时间的方法。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Strict&...
2017-04-01
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator(&#x27;email&#x...
2018-05-25
整理关于Bootstrap警示框的慕课笔记
在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示: 在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框...
2017-04-01
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
回到顶部