相关疑难解决方法(0)

我想动态创建模板.这应该用于ComponentType在运行时构建一个并在托管组件内部放置(甚至替换)它.

直到我使用RC4 ComponentResolver,但RC5我收到消息:

ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.

我发现了这个(官方的angular2)文件

Angular 2同步动态组件创建

并了解我可以使用其中之一

• 一种动态的ngIf用ComponentFactoryResolver.如果我将已知组件传递到托管内部@Component({entryComponents: [comp1, comp2], ...})- 我可以使用.resolveComponentFactory(componentToRender);
• 真正的运行时编译,带Compiler...

但问题是如何使用它Compiler？上面的注释说我应该打电话:Compiler.compileComponentSync/Async- 那怎么样？

例如.我想为一种设置创建(基于一些配置条件)这种模板

<form>
   <string-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></string-editor>
   <string-editor
     [propertyName]="'description'"
     [entity]="entity"
   ></string-editor>
   ...

在另一种情况下这个(string-editor被替换text-editor)

<form>
   <text-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></text-editor>
   ...

等等(editors属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.

该 …

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

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

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);

我有以下jsfiddle

我希望能够将我的自定义组件粘贴到特定的网格中(例如"")

现在没有Angular2,我只是使用:

var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);

问题是,我不知道我怎么能这样做:

var el = $.parseAndCompileHTMLWithComponent("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><fancy-button></fancy-button><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);

在angular1中,我知道有一个编译,但在angular2中,没有这样的东西.

我的花哨按钮组件很简单,如下所示:

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

如何动态添加花式按钮组件？

我一直试图从两天后找到解决这个问题的方法.不幸的是,我无法得到我想要的东西.我正在使用Angular5.

<div class="form-group col-md-12" [innerHTML]="GetItemsOfHolder(item.children[1],1,
'UserConfigGroupsLabelHolder') | keepHtml"></div>

这就是我的功能:

GetItemsOfHolder(item: any,divName:string, recursive: boolean = false,typeName:string="") 
{
return html;
}

一切正常,除非我返回的html包含一个名为Select2的包 这是我用来将html添加到这个div中它非常好用.直到我想添加动态包.

我的意思是return html包含这样的包组件:

itemhtml +="<select2 data-type='"+holderItem.itemType+"' 
[data]='this.dropdownData."+holderItem.name+"'></select2>"  

这只是将纯文本返回给浏览器,并且无法按预期工作.

我想要的是要转换为组件的字符串或任何其他工作方式并生成select2下拉列表.

我一直试图搜索这么多东西.但它不起作用 这很好但我无法理解这一点 并且不推荐使用dynamiccomponentloading.

任何人都可以请给我一个想法我该如何解决这个问题？任何一个例子都会很棒.

我已经尝试了很多stackoverflow选项,例如动态加载现有组件Angular 2 Final Release.

我想要做的是获取一个带有ajax请求的html页面,并在我的自定义组件中呈现/编译此模板.

我已经发现angular2有两个不赞成使用的组件,我必须使用ComponentFactoryResolver.

在我的旧解决方案中,我可以设置'[innerHtml]'来呈现HTML.现在我需要一个新的解决方案.

谁能帮助我？

page.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactory, OnInit, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';


@Component({
    selector: "wd-page",
    templateUrl: "/app/page/page.component.html",
    providers: []
})
export class PageComponent implements OnInit {

    // we need the viewcontainer ref, so explicitly define that, or we'll get back
    // an element ref.
    @ViewChild('dynamicChild', { read: ViewContainerRef })
    private target: ViewContainerRef;

    private page = {
        Source: "<div><h2>Hello world</h2><one-of-my-components></one-of-my-components></div>"
    }


    constructor( …

我正在寻找一种方法来从另一个组件的代码中实例化Angular2中的组件.与许多提出类似问题的人不同,我对动态编译新组件并不感兴趣,只是实例化并插入已存在于我的应用程序中的组件.

例如:

说我有两个组成部分:

仪表板item.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard-item",
    template: "Some dashboard item with functionality"
})
export class DashboardItemComponent {
    constructor() {}

    onInit() {}
}

dashboard.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard",
    template: "<h1>Dashboard!</h1><div #placeholder></div>"
})
export class DashboardComponent {
    constructor() {}

    onInit() {}
}

我正在寻找的是一种在DashboardComponent的onInit中创建DashboardItemComponent并将其添加到#placeholder div的方法.

有两点需要注意:

• 我需要能够使用子组件的输入/输出
• 我明确地没有谈论像这两个问题所描述的那样动态编译新组件:如何使用/创建动态模板来使用Angular 2.0编译动态组件？和Angular 2中的$ compile相当

这两个早期的问题提出了类似的问题,但他们的答案要么相当平淡,要么与Angular2的早期(beta)版本相关,而且似乎不再起作用.

• 如何实例化和渲染Angular2组件？
• 是否可以手动实例化角度2中的组件

可以从变量中的字符串中评估模板吗？我需要将字符串放在组件中而不是表达式中,例如

template: "<div>{{ template_string }}</div>"

template_string包含:<b>{{ name }}</b>

所有人都应该被评估 <div><b>My Name</b></div>

但我知道 <div>{{ template_string }}</div>

我需要类似{{ template_string | eval }}或其他东西来评估当前上下文中变量的内容.

这是可能的？我需要使用这种方法,因为template_string可以在使用组件时进行更改.

EDIT1:

角度版本:4.0.3

例如

@Component({
  selector: 'product-item',
  template: `
    <div class="product">{{ template }}</div>`,
})
export class ProductItemComponent {
  @Input() name: string;
  @Input() price: number = 0;
  @Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`;
}

用法:

<product-item [name]="product.name" [price]="product.price"></product-item>

预计: 产品名称USD3.00

输出: {{ name }} <b>{{ price | currency …

我正在尝试构建一个支持插件的Web应用程序,环境是Angular 2(到目前为止),Typescript 2.1和Webpack 2.我有一些扩展点(插槽)插件可以在其中绘制内容:基本上我有一个组件它能够托管运行时已知的其他组件(参见"掌握Angular 2组件"第10章的想法,以及SO + plunker如何在运行时编译和"绘制"Angular组件)

这就是我想要实现的目标:

// in plugin.service.ts
loadPlugin(url)
{
    return System.import('absolute OR relative ?? plugin base path' + name)
           .then((pluginModule) => {
               const Plugin = pluginModule.default;
               // then use the plugin
    });
}

...

//content of the plugin file being imported
export default class HeaderButtonsPlugin {
    constructor() {}
    //useful things about the plugin
}

我在运行时使用System.importWebpack 导入模块,虽然我知道不推荐使用,但AFAIK是使用typescript动态导入模块的唯一方法,因为importtypescript本身尚不支持(参考这里).(有没有其他方法可以实现这一目标？)

现在,仅仅为了测试系统,我使用下面的目录树将插件目录包含在应用程序的同一根目录(src目录)中; 请注意,这会导致webpack在编译时知道插件代码的存在,并将插件和应用程序打包在同一个bundle的集合中,这是为了测试插件架构功能而进行的简化; 这是文件夹树:

- src
    - app
        - core
            - plugin.service.ts
    - …