当前位置:首页>开发>正文

怎么知道angular已经编译完成并生成好HTML了 如何获取到angular.js的自定义指令的值

2023-05-22 17:51:42 互联网 未知 开发

 怎么知道angular已经编译完成并生成好HTML了 如何获取到angular.js的自定义指令的值

怎么知道angular已经编译完成并生成好HTML了

不需知道,根据angular最佳实践原则,一切和DOM操作有关的代码都应该封装到directive里,这样可以确保HTML编译完毕再执行。再者,一切逻辑运算都应当封装到service里。controller里的代码应当确保最简化。

如何获取到angular.js的自定义指令的值

angularJS中怎么写自定义指令 directive()接受两个参数 name:字符串,指令的名字 factory_function:函数,指令的行为 应用启动时,以name作为该应用的标识注册factory_function返回的对象。 在factory_function中,我们可以设置一些选项来改变...

angular2怎么获取容器宽高的变化

一、元数据传递
  1)配置inputs,接收外部传来的参数:
  在inputs里配置输入属性,宿主同过这个属性就能把数据传进来。
  示例如下:

@Component({
selector: test-component,
template: `{{inputValue}}`,
inputs: [inputsValue]
})
export class TestComponent {
private inputsValue//注意,要在组建内声明,才能使用
}

  宿主通过“[输入属性]=输入值”的方式传值,给属性打上中括号代表输入。以上面例子为例,其父组件调用方式如下:

@Component({
selector: parent-component,
template: ``//以“[属性]=值”的方式传递
})
export class ParentComponent {
private data = Hello InputValue~!
}

  当然,如果不配置元数据,我们还可以在组件类中用“@Inputs() inputsValue”声明,效果一样;我们还可以编写“setter”函数对输入的数据进行加工过滤,这里不做细讲。
  2)配置outputs,给父组件传递数据:
  outputs是利用自定义事件的机制给父组件传递数据;元数据配置与inputs相似,只是组件类中要给输出属性创建EventEmitter实例。
  示例如下:

@Component({
selector: test-component,
template: `点击按钮,输出数据`,
outputs: [outputValue]
})
export class TestComponent {
public outputValue = new EventEmmitter
private clickToSend() {
this.outputValue.emit(Hello OutputValue~!)//注意,自定义事件必须要借助异步程序执行发布函数;异步程序有事件、前后端数据交互、延时函数。
}
}

  outputs相当于给组件声明了一个自定义事件,父组件绑定该事件就能与输出机制建立联系,输出数据就是事件对象。
  以上面例子为例,父组件示例如下:

@Component({
selector: parent-component,
template: ``//属性加上小括号代表输出
})
export class ParentComponent {
private getValue(event) {
console.log(event)//Hello OutputValue~!
}
}

  同样,你也可以用@Output来声明,这里不做细讲。

二、单例模块传递
  JavaScript传值策略是:基本类型数据传数据副本,对象类型数据传对象引用。Angular2各模块注入Module中,只要在Module作用域范围,这些模块再通过依赖注入方式注入到别的模块,依赖的模块是单例的。
  我们可以利用对象传引用的特性,达到组件间传递数据的目的。
  比如我想将数据传给子组件,只需在子组件构造器中注入该组件,该组件由于是单例的,那么一方改动另一方能实时访问到。
  示例如下:

//父组件:
@Component({
selector: parent-component,
template: `
{{value}}

`
})
export class ParentComponent {
public value = Parent Value...//注意!这里不能使用private权限,否则外部模块无法访问到这个属性。
}

//子组件:
@Component({
selector: child-component,
template: `{{_parent.value}}`
})
export class ChildComponent {
constructor(private _parent: ParentComponent) {}//注入父组件的实例,就能访问到父组件非私有属性了。
}

  结果是
Parent Value...Parent Value...
  你还可以用指令、管道、服务来传值,只要是单例模块,都能做到;不过为了代码内聚性,建议只使用组件或者服务作为值传递的媒介。

还有别的传值方式吗?
  当然还有,比如绕过Angular2的API,使用JQuery的data函数进行值的获取和传递。不建议这么做,Angular不鼓励开发者直接操作DOM,它内置了一系列指令以及机制来弱化开发者对DOM的直接操作,开发者使用Angular提供的API可以减少很多操作DOM的代码。
分类: Angular标签: angular2, 组件, 传值

angular中在自定义指令中怎么获取其所在控制层中的数据

如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应。 输入 camnpr angularjs directive input focus 失去焦点后提示 camnpr 这个用

一个angular应用 可以包含两个自定义指令吗

directive()接受两个参数 name:字符串,指令的名字 factory_function:函数,指令的行为 应用启动时,以name作为该应用的标识注册factory_function返回的对象。 在factory_function中,我们可以设置一些选项来改变指令的行为。

最新文章