问题标签 [angular2-directives]

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 投票
3 回答
55902 浏览

typescript - Angular2,TypeScript,如何读取/绑定属性值到组件类(在 ngOnInit 中未定义)

有人可以建议我如何读取/绑定属性值到@component 类,这在 ngOnInit 方法中似乎是未定义的?

这是一个 plunker 演示: http ://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

我想阅读“someattribute”属性的值

在 App 类 (src/app.ts) ngOninit 方法中。

谢谢!

0 投票
8 回答
174473 浏览

angular - Angular:找不到不同的支持对象“[object Object]”

我正在关注本教程。在从 api.github 获取用户列表的路上我得到错误:

找不到不同的支持对象“[对象对象]”

我认为它与

在我的代码中,因为之前没有任何错误,并且我不确定数据是否来自获取请求,只需单击没有给出任何错误,这是我的代码到目前为止

0 投票
1 回答
1676 浏览

angular - 在 Angular 2 中注入动态指令/组件

我是 Angular 2 的新手,我想我会制作一个可扩展的主从流程来开始学习。

“主”部分正在工作,我可以轻松地插入我需要在引导应用程序时填充列表的特定服务。问题在于使“细节”部分可扩展。

基本上,主从模板在模板中有以下几行:

不,我可以只加载Detail指令并完成它,但我希望该指令/组件是可注入的,因此我可以插入我喜欢的任何详细指令/组件,而无需将其硬编码到“主细节”组件中。

为了实现这一点,我尝试了DynamicComponentLoader

而master-detail.component.ts的构造函数:

作为引导程序的一部分:

好消息是它有效,它会SomeSpecificDetailComponent在需要的地方加载并显示模板。

但现在我被困住了。打字稿在抱怨,我似乎无法访问通过传递的项目<detail [item]='masterItemActive'>,我不知道这种模式是否是为这个问题寻找解决方案的方法。

所以我的三个问题是:

DynamicComponentLoader解决这个问题的方法是什么?

因为我更喜欢provide()主从使用的指令。这似乎是最轻松的方法,但我不知道如何实现这一点。

我怎样才能进入item里面SomeSpecificDetailComponent

我试过了:

以及如何防止打字稿抱怨?

因为第一个参数dcl.loadAsRoot()需要是“类型”类型 - 它不是。

任何帮助将非常感激!

更新

我一直错误地Type用作接口,打字稿编译错误已通过使用BaseDetailComponent extends Type.

0 投票
1 回答
4197 浏览

angularjs - 使用Angular 2获取数组中每个项目的总值

我有一系列衬衫,每件衬衫都有一个价格,我想使用 Angular 2 获得所有衬衫的总价格。

这是我的数据的样子:

然后我想将成本加在一起并显示在我的组件中这大致是我到目前为止所要做的:

麻烦的是,console.log(shirt)这里没有返回任何内容,即使返回,我也不确定如何将新shirt项目添加在一起。这个问题的另一个要素是我应该在组件上还是在服务中这样做?

编辑: 我做了以下更改,但我得到了0,我应该得到40

html:

更新的衬衫组件:

0 投票
4 回答
30257 浏览

angular - Angular2:用组件的模板替换宿主元素

我是angular一般和angular2特别的新手。我正在尝试编写一个容器组件,其中应该有子组件。

例如,容器组件

子组件:

我想做这个结构:

呈现为以下之一:

但相反,我保留了容器的宿主元素和项目:

Plunk 可在此处获得

问题:有没有办法消除宿主元素并只留下渲染的模板?

0 投票
2 回答
1623 浏览

angularjs - Angular 2:使用数据手动引导组件而不是根组件的一部分

我有一个组件,我想在主引导应用程序之外进行初始化和渲染。

例如,在反应中,我可以做这样的事情:

我希望能够在 Angular 2 中使用组件做类似的事情。

另外,我从角度上意识到,这些组件也可能被视为指令。我不太确定在这种情况下是否应该使用指令或组件术语。

这是我现在正在做的示例代码(我试图尽可能地减少):

现在,它给了我以下错误:

例外:TypeError:无法读取 TweetComponent 中 {{tweet.text}} 中未定义的属性“文本”]

0 投票
2 回答
1573 浏览

javascript - Angular 2中指令评估的控制顺序

我想在 Angular 2 中创建一个属性指令。它需要在其主机上有一个点击处理程序。需要在评估元素上的其他指令之前添加点击处理程序,因为它控制对某些功能的访问。在 Angular 1 中,您可以在创建指令时使用优先级选项来执行此操作。Angular 2中是否有某种等价物?

谢谢,大通

0 投票
8 回答
10828 浏览

drag-and-drop - Angular 2拖放指令非常慢

我正在尝试实现自定义拖放指令。它可以工作,但速度非常慢,我认为可以跟踪到 Angular 2,因为我以前从未遇到过这种缓慢。仅当我将事件侦听器附加到dragoverordrag事件(即频繁发送的事件)时才会发生缓慢,即使我什么都不做,只是返回false它们。

这是我的指令代码:

这是相关的样式表摘录:

正如你所看到的,我所做的只是用黄色突出显示被拖动的元素。当我不处理dragover事件时它工作得很快,但是我必须处理它以支持丢弃。当我处理dragover事件时,一切都会慢到无法忍受的程度!!

编辑我正在使用 angular beta 2.0.0-beta.8

编辑#2我尝试使用 chrome 的分析器分析代码,结果如下:

伊姆古尔

看标线,莫名的可疑……

编辑#3发现问题:确实是由于 Angular 2 的变更检测。在我的例子中,拖放操作是在一个非常密集的页面上完成的,其中包含很多绑定和指令。当我注释掉除给定列表之外的所有内容时,它再次快速运行......现在我需要你的帮助来找到解决方案!

0 投票
1 回答
2018 浏览

angularjs - 在 Angular 2 中访问组件中的局部变量失败

我想获取 DOM 元素并在不使用ElementRef.

代码:

无论如何,this.container仍然是null。我写的代码哪一部分是错误的?


解决方案:

在访问ViewChild属性之前,您必须确认视图已初始化。也@VarChild返回ElementRef,如果你想进一步处理它需要DOMElement,请使用nativeElement属性这是一个Element

0 投票
2 回答
1852 浏览

angular - 防止默认路由 - Angular 2

如何防止默认路由 Angular 2?在router subscribe中,我只得到路径名。我没有参与其中。Angular 2 中是否还有其他服务提供商可以获取路线更改事件?

app.component.js

引导.js