问题标签 [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.
angular - 在兄弟组件Angular 2之间进行通信
我试图遵循这个答案,但它在兄弟组件之间捕获的 Angular 2 事件太令人困惑了
当在子组件 2上单击某些东西时,我想在子组件 1中调用一个方法
子组件 2 发出一个名为 trackClick 的事件。
父组件:
子组件 1(音频播放器)
子组件 2(音频专辑)
angular - Angular2标签上的for属性不会将其链接到输入
我正在使用 Angular2 RC5。我有一个封装标签和输入的组件
它从任何模板调用如下<my-input id="inputcontrol">input</my-input>
问题是,当我单击标签时,输入没有获得焦点,尽管当我在浏览器中检查开发工具时,for 和 id 属性都已正确设置
这是一个显示问题的 plunker:https ://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n
angular - 如何在 Angular 2 中动态嵌套/嵌入组件模板
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。
我已经看到很多关于动态组件加载器的过时文档,这些文档已经被工厂弃用了。我所缺少的任何帮助都会很棒。任何活生生的例子都会很棒。
谢谢你。
angular - Route 显示重复的表单
我在 angular2 中启动了一个项目,但无论出于何种原因,我的路线都会显示我的组件两次。这是相关的代码片段。
app.routing.ts
app.module.ts
app.component.html包含<app-auth></app-auth>
auth.component.ts
auth.component.html
我在这里想念什么?
javascript - 如何在 Angularjs 2 中在 javascript 中设置 @input 属性(无打字稿)
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'
html - ngOnInit 忽略 CSS 过渡
我有 div,我希望使用 CSS 过渡属性在 3 秒的间隔内将其宽度从 0 增加到 100。当我在 Chrome 开发人员工具中更改此属性时,它会在 3 秒的持续时间内从 0 到 100 很好地增长。但是,如果我应用组件的样式ngOnInit()
,它是即时的。难道我做错了什么?
编辑:我确实自己解决了这个问题,但是一个答案也解释了为什么它会很好。
组件.ts:
组件.html:
javascript - 在Angular2中同一类的两个根组件上调用Bootstrap()?
我发现当bootstrap()被调用时,它会将一个类实例与 DOM 上的选择器匹配并插入一个影子 DOM。
因此,为了尝试引导同一类的两个根组件,我在每个组件上都指定了一个不同的“选择器”。
但是,虽然每个组件都使用不同的“选择器”进行引导,但如果我查看每个组件的注释元数据,它们都指向相同的 '_hostElement.nativeElement'。
前任:
以下打印显示'_hostElement.nativeElement'的注释元。
对于以下类声明:
这就是我引导每个实例的方式,以便它们具有不同的选择器:
上面的引导函数返回一个 Promise,这对于两个实例都是成功的,这与人们所期望的相反。
当我检查 DOM 时,我可以看到有两个不同的“选择器”标签可以按预期标识根应用程序,但如下图所示 - 引导组件'ComponentRef_'指向相同的 '_hostElement.nativeElement'。
[这里是引导调用的 'ComponentRef_' - 两个调用都返回相同的 ComponentRef_ ][1]
如何让同一类的两个根组件很好地发挥作用?
angular - 在 Angular 2 中,组件视图如何通过服务更新
我是 Angular2 的新手,正在努力通过服务更新组件视图。
我想要我的应用程序中有两种不同的页面类型。一个显示带有小徽标的标题,另一个不显示标题但具有更大的徽标。
我在根应用程序组件下有一个应用程序头组件。app-header 组件检查服务中的一个数组并使用 *ngIf 来更改它显示的内容。我正在附加路由更改,因此它会检查 NavigationStart 并使用服务相应地更新值。
如果我点击刷新,视图会正确显示,但如果我在应用程序中更改路由,则视图 app-header 组件不会更新。当我 console.log 值时,我看到服务值和组件类属性正在正确更改,但在组件视图中没有任何更新。我虽然可能有多个服务实例,但我在服务上添加了一个随机数来检查,它都是同一个实例。
这是模板服务:
这是应用程序头组件:
angular - Angular2 - 表单错误行为中的自定义指令
<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”字段,表单将不会像预期的那样是原始的。