相关疑难解决方法(0)

在Angular中手动触发变化检测

我正在编写一个具有属性的Angular组件Mode(): string.我希望能够以编程方式设置此属性,而不是响应任何事件.问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新.有没有办法手动触发此更改检测?

angular2-changedetection angular

352
推荐指数
4
解决办法
21万
查看次数

带有用户单击所选组件的Angular动态选项卡

我正在尝试设置一个标签系统,允许组件自己注册(带标题).第一个选项卡就像一个收件箱,有大量的操作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件.动作/链接来自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)

问题:

  1. 如何在收件箱中创建一个动态列表来创建新的(不同的)标签?我有点猜测DynamicComponentBuilder会被使用吗?
  2. 如何从收件箱创建的组件(单击时)将自己注册为选项卡并显示?我猜ng-content,但我找不到有关如何使用它的更多信息

编辑:尝试澄清

将收件箱视为邮件收件箱,将项目作为JSON提取并显示多个项目.单击其中一个项目后,将创建一个新选项卡,其中包含该项操作"类型".然后类型是一个组件

Edit2:图片

http://i.imgur.com/yzfMOXJ.png

angular-template angular

214
推荐指数
3
解决办法
13万
查看次数

如何在两个模块之间共享服务 - @NgModule在角度之间而不是在组件之间?

在我的应用程序中,我有两个不同的bootstrap模块(@NgModule)在一个应用程序中独立运行.没有一个角度app位单独的bootstrap模块,现在我希望他们应该相互通信并共享数据.

我知道通过@Injectable服务作为模块中的提供者,我可以在所有组件下共享数据,@NgModule但是我将如何在两个不同模块(不是模块内部组件)之间共享数据.

有没有办法在另一个模块中访问一个服务对象?有没有办法可以访问浏览器内存中可用的服务对象并在我的其他角度模块中使用它?

angular2-services angular2-modules angular

38
推荐指数
3
解决办法
3万
查看次数

Angular 2:如何动态创建ViewContainerRef

我正在尝试创建具有显示任意模态的能力的模态服务.目前,要创建动态组件,我在视图中存储占位符:

 <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元素中创建/删除视图容器?

components angular

13
推荐指数
1
解决办法
4285
查看次数

Angular 2将@Component插入另一个组件的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模板中的内容文本.

javascript angular

10
推荐指数
1
解决办法
7409
查看次数

在Angular2中引导多个组件

我的问题是内联这个问题: 引导多个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.

我的做法是对的吗?

javascript typescript angular

10
推荐指数
2
解决办法
7608
查看次数

为什么@NgModule中的"bootstrap"键是一个数组?

据我所知,应用程序只能有一个入口点.如下面给出的代码片段所示,我们在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,这个问题可能听起来很傻:)

angular

7
推荐指数
1
解决办法
1735
查看次数

Angular 2 bootstrap多根组件

我希望能够将多个应用程序根组件启动到我的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上工作.

提前致谢.

angular

6
推荐指数
2
解决办法
8811
查看次数

在主应用程序外部渲染Angular组件

我有一个角度应用程序,它有一个捆绑包和一个包含根选择器的HTML代码

<app></app> 
Run Code Online (Sandbox Code Playgroud)

引导应用程序的位置。

是否有可能以某种方式在该应用容器之外呈现该应用中的组件?在HTML中,类似

<component-name></component-name>
Run Code Online (Sandbox Code Playgroud)

这样做的原因是,此应用程序正在外部加载,以便仅一步一步地分析组件,而不是整个应用程序,这类似于该应用程序中组件的样式指南。因此,我加载了捆绑软件,并且希望能够仅渲染用户选择的组件。

angular

6
推荐指数
2
解决办法
2253
查看次数

从外部内容加载动态组件

我正在研究的系统由许多分布式微服务组成,每个组件的潜在多个版本可能同时处于活动状态.

我试图构建的Angular2应用程序应该能够通过websockets与这些组件中的每一个进行交互.因为为每个组件的所有未来版本和功能,相应的协议实现甚至新组件准备此应用程序似乎是不可行的,所以我想将此责任推给组件本身.

每个组件都能够通过在同一个websocket连接上发送的包传递其功能(以NG2组件的形式)以及协议实现和必要的GUI元素(HTML/CSS).

是否有一种模式可以在ng2中实现这种"按需加载"组件及其模板?

distributed microservices angular2-template angular

5
推荐指数
1
解决办法
1277
查看次数