我正在编写一个具有属性的Angular组件Mode(): string.我希望能够以编程方式设置此属性,而不是响应任何事件.问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新.有没有办法手动触发此更改检测?
我正在尝试设置一个标签系统,允许组件自己注册(带标题).第一个选项卡就像一个收件箱,有大量的操作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件.动作/链接来自JSON.
然后,实例化的组件将自己注册为新选项卡.
我不确定这是否是"最佳"方法?Sofar我见过的唯一指南是静态标签,这没有帮助.
到目前为止,我只有主要引导的标签服务在整个应用程序中持续存在,看起来像这样的东西.
export interface ITab { title: string; }
@Injectable()
export class TabsService {
private tabs = new Set<ITab>();
addTab(title: string): ITab {
let tab: ITab = { title };
this.tabs.add(tab);
return tab;
}
removeTab(tab: ITab) {
this.tabs.delete(tab);
}
}
Run Code Online (Sandbox Code Playgroud)
问题:
DynamicComponentBuilder会被使用吗?ng-content,但我找不到有关如何使用它的更多信息编辑:尝试澄清
将收件箱视为邮件收件箱,将项目作为JSON提取并显示多个项目.单击其中一个项目后,将创建一个新选项卡,其中包含该项操作"类型".然后类型是一个组件
Edit2:图片
在我的应用程序中,我有两个不同的bootstrap模块(@NgModule)在一个应用程序中独立运行.没有一个角度app位单独的bootstrap模块,现在我希望他们应该相互通信并共享数据.
我知道通过@Injectable服务作为模块中的提供者,我可以在所有组件下共享数据,@NgModule但是我将如何在两个不同模块(不是模块内部组件)之间共享数据.
有没有办法在另一个模块中访问一个服务对象?有没有办法可以访问浏览器内存中可用的服务对象并在我的其他角度模块中使用它?
我正在尝试创建具有显示任意模态的能力的模态服务.目前,要创建动态组件,我在视图中存储占位符:
<div #container></div>
...
@ViewChild("dialogContainer", {read: ViewContainerRef})
dialogContainer:ViewContainerRef;
Run Code Online (Sandbox Code Playgroud)
而不是创建组件:
let factory = this.componentResolver.resolveComponentFactory(Dialog);
this.componentReference = this.dialogContainer.createComponent(factory);
Run Code Online (Sandbox Code Playgroud)
有没有办法将所有这些逻辑从组件转移到服务,能够在正文或任何其他DOM元素中创建/删除视图容器?
我有一个组件
import { Component } from '@angular/core';
@Component({
selector: 'test-component',
template: '<b>Content</b>',
})
export class TestPage {
constructor() {}
}
Run Code Online (Sandbox Code Playgroud)
我有另一个组成部分:
import { Component } from '@angular/core';
@Component({
selector: 'main-component',
templateUrl: 'main.html',
})
export class MainPage {
constructor() {}
putInMyHtml() {
}
}
Run Code Online (Sandbox Code Playgroud)
main.html中:
<p>stuff</p>
<div> <!-- INSERT HERE --> </div>
Run Code Online (Sandbox Code Playgroud)
如何以编程方式将TestPage组件动态插入到区域中<!--INSERT HERE-->,就像我运行时一样putInMyHtml.
我尝试编辑DOM并插入,<test-component></test-component>但它不显示TestPage模板中的内容文本.
我的问题是内联这个问题: 引导多个angular2模块时出错
我的index.html有以下代码
<app-header>Loading header...</app-header>
<app-root>Loading...</app-root>
<app-footer>Loading footer...</app-footer>Run Code Online (Sandbox Code Playgroud)
在我的app.module.ts中,我将这3个组件提供给bootstrap:
bootstrap: [AppComponent,HeaderComponent,FooterComponent]Run Code Online (Sandbox Code Playgroud)
在我的主页上,我引导他们
platformBrowserDynamic().bootstrapModule(AppModule);Run Code Online (Sandbox Code Playgroud)
该应用程序适用于所有三个模块.当其中任何一个被删除时,该应用程序可以工作但我在控制台[img attach]中收到的错误很少.

我试图在同一组件中创建可以插入和移出应用程序的独立模块.例如,页眉,页脚和正文模块.有些页面可能不需要标题,因此我可以跳过app-header include.
我的做法是对的吗?
据我所知,应用程序只能有一个入口点.如下面给出的代码片段所示,我们在bootstrap键中传递一个数组,该数组决定了应用程序的入口点.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent, MyComboboxComponent,
CollapsibleDirective, CustomCurrencyPipe],
imports: [BrowserModule],
providers: [UserService, LessonsService],
bootstrap: [AppComponent]
})
export class AppModule {
}
Run Code Online (Sandbox Code Playgroud)
PS:我正在学习Angular 2,这个问题可能听起来很傻:)
我希望能够将多个应用程序根组件启动到我的index.html页面中.这最初可能在角度2 beta 0 - 15,但从beta 16开始,它不再工作了.请参阅此代码 http://plnkr.co/edit/A7fyFUST9IdP1FriauXk?p=preview
please see plunker link above for the code
Run Code Online (Sandbox Code Playgroud)
希望有人可以修改代码,以便能够在角度2 beta 17上工作.
提前致谢.
我有一个角度应用程序,它有一个捆绑包和一个包含根选择器的HTML代码
<app></app>
Run Code Online (Sandbox Code Playgroud)
引导应用程序的位置。
是否有可能以某种方式在该应用容器之外呈现该应用中的组件?在HTML中,类似
<component-name></component-name>
Run Code Online (Sandbox Code Playgroud)
这样做的原因是,此应用程序正在外部加载,以便仅一步一步地分析组件,而不是整个应用程序,这类似于该应用程序中组件的样式指南。因此,我加载了捆绑软件,并且希望能够仅渲染用户选择的组件。
我正在研究的系统由许多分布式微服务组成,每个组件的潜在多个版本可能同时处于活动状态.
我试图构建的Angular2应用程序应该能够通过websockets与这些组件中的每一个进行交互.因为为每个组件的所有未来版本和功能,相应的协议实现甚至新组件准备此应用程序似乎是不可行的,所以我想将此责任推给组件本身.
每个组件都能够通过在同一个websocket连接上发送的包传递其功能(以NG2组件的形式)以及协议实现和必要的GUI元素(HTML/CSS).
是否有一种模式可以在ng2中实现这种"按需加载"组件及其模板?