问题标签 [angular2-components]

我试图遵循这个答案，但它在兄弟组件之间捕获的 Angular 2 事件太令人困惑了

当在子组件 2上单击某些东西时，我想在子组件 1中调用一个方法

子组件 2 发出一个名为 trackClick 的事件。

父组件：

子组件 1（音频播放器）

子组件 2（音频专辑）

我正在使用 Angular2 RC5。我有一个封装标签和输入的组件

它从任何模板调用如下<my-input id="inputcontrol">input</my-input> 问题是，当我单击标签时，输入没有获得焦点，尽管当我在浏览器中检查开发工具时，for 和 id 属性都已正确设置

这是一个显示问题的 plunker：https ://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

Plunkr 链接到我正在尝试做的事情-> https://plnkr.co/edit/mC8jGYROlpqFpnjTCQKr?p=preview

我的目标是能够从工具菜单向左拖到舞台上。在“放置”时，所选项目应嵌套在舞台内。

我搜索了文档和博客。我已经看到“CreateEmbeddedView”似乎是我应该使用的。

根据 Angular2 文档，以下是我正在寻找的内容：

createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number) : EmbeddedViewRef

但是似乎找不到一个实际的例子。我使用的是“src/designer-droppable.directive.ts”中的以下内容：

但是，这会将一个组件作为同级添加到“viewContainerRef”而不是嵌入它。即在 plnkr 中，如果您将某些东西拖到舞台上，它将被添加到舞台的右侧，而不是被嵌入。

我尝试使用 CreateEmbeddedView，但我不清楚如何动态定义 TemplateRef。

我已经看到很多关于动态组件加载器的过时文档，这些文档已经被工厂弃用了。我所缺少的任何帮助都会很棒。任何活生生的例子都会很棒。

谢谢你。

我在 angular2 中启动了一个项目，但无论出于何种原因，我的路线都会显示我的组件两次。这是相关的代码片段。

app.routing.ts

app.module.ts

app.component.html包含<app-auth></app-auth>

auth.component.ts

auth.component.html

我在这里想念什么？

Angularjs 2教程描述了如何在 TypeScript 上为组件设置输入变量

由于 javascipt 的文档尚不可用，我坚持通过 javascript 设置组件变量，这里是应该接收 hero 变量作为输入的组件的代码，我可以设置它吗？

使用组件<hero-detail [hero]="selectedHero"></hero-detail> 由于未设置 属性hero浏览器触发以下错误Can't bind to 'hero' since it isn't a known property of 'hero-detail'

我有 div，我希望使用 CSS 过渡属性在 3 秒的间隔内将其宽度从 0 增加到 100。当我在 Chrome 开发人员工具中更改此属性时，它会在 3 秒的持续时间内从 0 到 100 很好地增长。但是，如果我应用组件的样式ngOnInit()，它是即时的。难道我做错了什么？

编辑：我确实自己解决了这个问题，但是一个答案也解释了为什么它会很好。

组件.ts：

组件.html：

我发现当bootstrap()被调用时，它会将一个类实例与 DOM 上的选择器匹配并插入一个影子 DOM。

因此，为了尝试引导同一类的两个根组件，我在每个组件上都指定了一个不同的“选择器”。

但是，虽然每个组件都使用不同的“选择器”进行引导，但如果我查看每个组件的注释元数据，它们都指向相同的 '_hostElement.nativeElement'。

前任：

以下打印显示'_hostElement.nativeElement'的注释元。

对于以下类声明：

这就是我引导每个实例的方式，以便它们具有不同的选择器：

上面的引导函数返回一个 Promise，这对于两个实例都是成功的，这与人们所期望的相反。

当我检查 DOM 时，我可以看到有两个不同的“选择器”标签可以按预期标识根应用程序，但如下图所示 - 引导组件'ComponentRef_'指向相同的 '_hostElement.nativeElement'。

[这里是引导调用的 'ComponentRef_' - 两个调用都返回相同的 ComponentRef_ ][1]

如何让同一类的两个根组件很好地发挥作用？

我是 Angular2 的新手，正在努力通过服务更新组件视图。

我想要我的应用程序中有两种不同的页面类型。一个显示带有小徽标的标题，另一个不显示标题但具有更大的徽标。

我在根应用程序组件下有一个应用程序头组件。app-header 组件检查服务中的一个数组并使用 *ngIf 来更改它显示的内容。我正在附加路由更改，因此它会检查 NavigationStart 并使用服务相应地更新值。

如果我点击刷新，视图会正确显示，但如果我在应用程序中更改路由，则视图 app-header 组件不会更新。当我 console.log 值时，我看到服务值和组件类属性正在正确更改，但在组件视图中没有任何更新。我虽然可能有多个服务实例，但我在服务上添加了一个随机数来检查，它都是同一个实例。

这是模板服务：

这是应用程序头组件：

我尝试在组件中使用 html 的相对路径，我也在 dist 文件夹中映射我的 js 文件。我的组件代码是

应用程序/app.component.ts

html 文件位于同一目录中，即 app/app.component.html

我收到以下错误

很明显，angular 正在“dist/app/app.component.html”中找到 app.component.html 文件，但该文件不存在，我该如何解决？

我的 systemjs.config.js 文件是

我的 tsconfig.json 是

<input ...>当模板中带有标签的自定义指令在角度形式内时，我遇到了问题。

如果您在表单中声明输入，则编辑输入字段将按预期更改表单的属性，例如原始、触摸、有效等。

如果您在表单中声明自定义指令，比如说<ac2-string-input ...></ac2-string-input>它的模板包含一个输入，那么如果您编辑此输入的字段，它将不会改变表单的属性。

这是为什么？那是一个错误吗？有什么解决方法吗？

下面你有一个例子：

我们可以有一个表单组件，在app/form.component.ts

带有模板templates/form/form.html

并且ac2-string-input指令在app/form/input.component.ts中定义

带有模板templates/form/input.html

如果我们加载表单，将会有两个文本字段，并且表单将是“Pristine”

如果我们编辑“attr2”字段，表单将继续保持原始状态，就好像该字段没有绑定到表单一样！

如果我们编辑“attr1”字段，表单将不会像预期的那样是原始的。