相关疑难解决方法(0)

带有用户单击所选组件的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万
查看次数

在Angular 2中等效$ compile

我想手动编译一些包含HTML的指令.$compileAngular 2中的等价物是什么?

例如,在Angular 1中,我可以动态编译HTML片段并将其附加到DOM:

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
Run Code Online (Sandbox Code Playgroud)

version-compatibility typescript angular2-compiler angular

127
推荐指数
4
解决办法
6万
查看次数

Angular 2 innerHTML(单击)绑定

我有一个如此大的html菜单,我决定绑定,以便能够进行几个子菜单下拉,并避免HTML代码重复.父>孩子(也是父母)>孩子......

对于上下文:在ng2_msList/msList.components.ts中,ColumnsManagements.ts作为this.ColumnsManagementInstance导入.innerHTML菜单正确显示在ng2_msList/pages/list.html中:

<!-- COLUMNS DROPDOWN BUTTON -->
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul>
Run Code Online (Sandbox Code Playgroud)

使用(在我的代码的一个非常简化的版本中):(感谢这个Stack Q)

setHtmlColumnsMenu() {
     var self = this;
     var htmlcolumnsmenu = '';
     [...]
     htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true));

     // which return something like a lot of html content and sometime in it : 
     // <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)">
     [...]
     return htmlcolumnsmenu;
}
Run Code Online (Sandbox Code Playgroud)

但是(单击)="msList.ColumnsManagementInstance.toogleColumn(列)"(以前在html内容中)不再有效.它在视图中写为标签中的简单文本(在未显示的innerHtml之前).

我无法达到让它重新运作的方法.我测试多种方式来调用函数或我在网站链接中发现作为对昂文件部分,这里的例子.这些示例调用一个非常容易在同一文件/上下文中设置的函数(click)="MyAction()"但是在我的上下文中我无法正确调用它.

应用程序架构可能不像Angular2点击调用所期望的那样.

angular

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