问题标签 [angular2-inputs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1555 浏览

ecmascript-6 - Angular2 ES6 @Input 替代

我正在尝试构建一个<markdown-component>使用 ES6 的语法。@InputES6 不支持语法糖,我找不到可行的替代方案。

我在父级中定义输入:

然后使用以下命令接受输入:

如果我添加一个模板,我可以得到它会按预期输出值,但无法在构造函数中使用输入。

这个模块实际上应该是一个指令,该source值将定义正在加载的 Markdown 文件的路径。

0 投票
1 回答
159 浏览

javascript - 使用 es5 和 es6 将输入注入组件构造函数

我试图弄清楚如何在 Angular 2 中使用 es5 和 es6 语法获取输入。我知道它可能,但我能找到的唯一文档使用 @ 符号,据我了解,这只是编译器的语法,但我不是能够使用编译器,所以我必须只用 es5 和 es6 编写我的代码,没有编译器,没有任何打字稿(相信我,我试图在我的计算机上获得打字稿编译器,但在我目前的环境中我无法做到。)有人知道怎么做吗?仅使用 es5 和 es6 即可获得输入。这是我尝试过的,但我一直在想我需要某种注入器来输入,但是除了打字稿语法之外,我找不到关于注入器的任何文档

然后我的html

该组件已成功引导,并将构造函数对象打印到控制台两次问题是第一个是空对象(这可能是有道理的,因为它尚未初始化)但第二个的文本等于“hi”意味着this.text之前没有定义。或在任何后续检查中,dom 支持这一点,因为它将 hi 打印到{{text}}

0 投票
2 回答
3710 浏览

angularjs - Angular 2 设置新值不会触发输入更改事件

我遇到了一个奇怪的情况,这种情况似乎只发生在第一次在一个基于大量组件的页面上加载一个组件时(加载 30 多个组件)。

在这段代码中,父级将获取一个值作为输入给子级。此值来自稍后的请求,因此当第一次初始化子时,输入可能是未定义的。当值确实从请求中返回并在变量上设置时myObject,我希望子组件会收到一个被触发的输入事件。但是,由于时间问题,情况似乎并非总是如此,尤其是当我第一次加载一个包含大量正在加载文件的页面时。

在子组件没有收到输入的情况下,如果我单击页面上的其他位置,现在似乎会触发更改检测并获取输入值。

我能想到的两种可能的解决方案需要一些大的代码更改,因此我想确保在实施它们之前立即选择正确的解决方案。

  1. 将输入更改为主题,以便我推送输入值,该值应确保触发正确的事件(这似乎有点矫枉过正)。

  2. 当请求以正确的值返回时,使用动态加载器加载组件(也似乎有点矫枉过正)。

更新: 添加一个 plnker:http ://plnkr.co/edit/1bUelmPFjwPDjUBDC4vb ,您可以在这里看到标题似乎永远不会应用其数据绑定。

任何建议,将不胜感激。

谢谢!

0 投票
6 回答
13535 浏览

angular - @Input 和其他装饰器和继承

我真的不明白对象绑定是如何工作的,所以如果有人能解释我是否可以在基类中使用@Input(),或者更好:装饰器和继承。例如,如果每个表单都应该接收一个客户,那么我有一个基类:

然后我在一个实际的组件中扩展这个类:

但这不起作用,客户永远不会被设置:(

0 投票
1 回答
849 浏览

typescript - Angular 2 - 在输入变量更改时更改邻居输入变量

我想在更改输入参数时执行一些操作。假设我有一个具有type输入变量的 DatePicker 组件,并且我想date在更改类型时对另一个变量执行一些操作。怎么做?

错误:表达式在检查后已更改。

0 投票
0 回答
2603 浏览

angular - 屏蔽Angular 2中的文本字段

我想在 Angular 2 中对电话号码、信用卡和 SSN 等字段应用屏蔽。我找不到任何解决方案。

当输入正确的位数时,应屏蔽字段,例如,如果用户输入 10 位数的电话号码。如果位数不合适,那么当用户点击模糊等字段时,应该会发生屏蔽。

如果有人可以为此分享解决方案,那就太好了。

谢谢。

0 投票
0 回答
349 浏览

data-binding - 如何在angular2中进行孙子和父母之间的双向绑定?

我需要在父母和孙子之间做两种绑定方式。因此,我尝试在孩子和其他两个之间进行两种绑定。

有人这样想

孙子 <==> 子 <==> 父

但它不像我预期的那样工作。

这是我的孙子:

这是我的孩子:

这是我的父母:

0 投票
1 回答
8079 浏览

typescript - Angular2 @Inputs 应该是公开的还是我们可以/应该通过将它们设为私有来拥有更严格的 API?

我正在使用带有 Typescript 的 Angular2

假设我的应用组件模板中有以下内容:

我的coffee-cup组件:

我目前不确定我的输入应该是什么样子。它可能看起来像这样:

或者

我目前倾向于将成员变量咖啡设为私有。

  • 我想为组件定义一个清晰的公共 API
  • 我只想公开通过模板设置咖啡属性
  • 我目前没有任何理由允许直接从父组件读取或设置咖啡。如果需要,我可以删除 private 修饰符。

我查看组件的方式是有两个单独的 API 可以与之交互:

  1. 模板 API,由@Inputs@Outputs
  2. 由所有公共属性和方法组成的 Typescript API

我没有检查以下情况会发生什么,但是,它可能会改变答案:

  • 假设咖啡会员是公开的。如果我appComponent可以CoffeeCup使用@ViewChild并设置咖啡成员,生命周期钩子(如ngOnChange)会触发吗?

重申这个问题:Angular2 应该@Input是公开的还是我们可以/应该通过将它们设为私有来拥有更严格的 API?

0 投票
1 回答
1952 浏览

angular - Angular 2数据绑定不适用于输入装饰器

我正在尝试根据输入装饰器更改圆环图的值。我能够初始化该值,但无法进一步更改它。

我正在使用<input type="number" [(ngModel)]="complete">2 路数据绑定值。但它不起作用。我认为它不起作用,因为模板已经被调用,我们稍后会更改数据。

有什么解决办法吗?

工作代码:http ://plnkr.co/edit/hYlFp1BX8ebixQMqAtNj?p=preview

父组件代码:

0 投票
1 回答
3990 浏览

angular - Angular 2 final - 将过滤器数据从 Filter.Component 传递到 App.component

我创建了一个简单的过滤应用程序,当我在同一个组件(app.ts)中有过滤和列表时:http: //plnkr.co/0eEIJg5uzL6KsI70wWsC

我想要实现的是将过滤移动到它自己的组件(filtering.component.ts)中,并适当地使用@Input 和@Output 函数将选择框的值传递回列表组件(app.ts)。

我已经在这里分离了组件,但是我无法将数据传递给列表组件。(app.ts): http://plnkr.co/1ZEf1efXOBysGndOnKM5

提前致谢。