问题标签 [angular2-components]

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 回答
787 浏览

angular - angular2:使用 *ngFor 创建动态组件时无法调用函数

我使用按钮单击手动创建了动态组件。如果我们单击添加按钮,它将在添加按钮旁边创建组件。如果我们单击“删除”按钮,它将删除该组件。

普朗克

在这里,问题是在使用 ngFor 创建组件时,单击“删除”按钮时无法删除组件。我注意到在使用 ngFor 创建组件时没有调用 Remove 函数。

在我的代码下面:

父组件:

子组件:

请帮我解决这个问题。非常感谢您的帮助。

提前致谢。

0 投票
3 回答
19889 浏览

javascript - Angular 2 使用组件属性动态设置 routerLink

我创建了一个组件,其中包含一个带有 routerLink 属性的元素,我想从使用该组件的模板中设置该属性。当我尝试这样做时,我收到错误消息“无法读取未定义的属性'路径'”。

我的组件看起来链接这个:

信息框.component.ts

info-box.component.html

并且使用该组件的模板如下所示:

如果我不添加 routerLink 一切正常。我的路由器配置似乎是正确的,因为当我直接将其添加到我的模板时它也可以正常工作。谁能帮我这个?

格特·马尔科

0 投票
1 回答
125 浏览

dependency-injection - Angular 2 组件树

我正在使用 Angular 2 开发我的第一个应用程序,并且我已经为 Google Chrome 安装了 Augury 插件,以帮助我调试代码。

这是组件树和图表:

在此处输入图像描述

在此处输入图像描述

这是我的自定义组件 (DocumentsList) 的 HTML 模板:

由于span图中的div是有*ngFor指令的 a 的子级,所以它不应该在图中显示为 的父级span吗?

我认为图表应该看起来像这样(使用 Paint 创建的图像)

在此处输入图像描述

在此处输入图像描述

0 投票
1 回答
1243 浏览

angular - onsubmit 返回所有行输入值 angular 2

我是 Angular 2 的新手。我有一个表格,单击“添加寄售”选项时,它会添加一个带有序列号和多个输入槽的新行。现在在添加更多寄售(在表中添加更多行的多个输入槽),并在所有这些行中输入信息并提交时,仅返回最后一行的值。有人可以告诉我如何将表中所有多个输入行的值作为一个对象返回吗?谢谢你。

下面是我的代码:

模板

零件

0 投票
0 回答
527 浏览

typescript - 销毁动态创建的组件会引发更改检测错误

我正在尝试销毁插入到模式窗口中的动态创建的组件。组件代码是

通过此服务显示模态窗口

该服务由父组件调用,父组件指定要使用的组件类型以及将输入和输出属性附加到组件引用(主体属性)的回调。

我遇到的问题是,当我尝试销毁动态创建的组件(FieldEditorComponent)时,出现错误

如您所见,我尝试清除 FieldEditor 中的订阅,并首先分离正在销毁的 ComponentRef 上可用的 ChangeDetectorRef。将 FieldEditor 的 ChangeDetectionStrategy 更改为 OnPush 也没有帮助。我还尝试了各种方式的 setTimeouts 来破坏组件、将引用设置为 null 以及删除模式的可见性。

modal 组件本身只是用来保存 html 并获取 modalBody ViewContainerRef,modalService 上的可见属性通过“display: none;”工作 而不是通过 *ngIf。

0 投票
0 回答
75 浏览

data-binding - 具有可绑定属性的Angular2自定义组件-如何在自定义组件中没有@Output的[(值)]?

我有一个带有输入属性的自定义组件,如下所示:

这样我就可以在父组件上放一个:

请注意,我没有提供 @Component 装饰器和父组件的类,因为我认为它们不相关。

现在,在 MyComponent 内部发生的事情可以改变value.

在 MyComponent 的模板中,我显示{{value}},它在其整个生命周期中显示正确的值。

从父组件的模板中,我显示{{someValueAtParentComponent}},但它没有更新 MyComponent 的值。我认为 [(value)] 会自动完成这项工作,但我想不会。

我不想@Output在 MyComponent 上为父组件创建一个事件来处理它将someValueAtParentComponent显式设置的事件。

我相信 Angular 想要为父组件发出一个事件来处理,但这似乎很乏味。我们可以在自己的组件中做些什么,以便我们可以使用语法糖[(value)]而不是[value]="..." (onValueChanged)="onValueChangedHandler($event)"?

0 投票
0 回答
96 浏览

angular - Angular2:将组件页面从服务传递到其他组件不起作用

如果我通过服务将组件页面传递给另一个组件,则其他组件无法使用“未定义 [?]”进行实例化。

如何做到这一点?(上下文:这样我就可以将组件导航集中在一个服务中)

更新

这是我们目前的解决方法,如果我可以这么说的话,就像大多数 Ionic Beta 和 Angular Beta 一样丑陋。这是我们的“PassThroughComponent”,每次我们想通过 navService 从一个组件动态导航到另一个组件时都会调用它(我们在那里有一些算法来计算用户的旅程):

不工作:

browser_adapter.js:84 原始异常:TypeError:无法读取未定义的属性“setRoot”

也不适用于 navController。

0 投票
0 回答
349 浏览

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

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

有人这样想

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

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

这是我的孙子:

这是我的孩子:

这是我的父母:

0 投票
2 回答
15825 浏览

typescript - 如何在Angular2中隐藏和替换组件

您好,我有一个父组件(A),它有 2 个子组件(B 和 C)。默认情况下,父 A 显示子组件 B。现在,当单击父 A 上显示的按钮时,它会将子组件 B 替换为子组件 C。在 angular2 中单击按钮后,如何将组件 B 替换为组件 C?

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?