相关疑难解决方法(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属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.

该 …

我是没有AngularJS经验的Angular 2的新手,并且正在编写一个涉及设置iframe src属性的教程:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

这引发了一个异常:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

我已经尝试过使用绑定但iframe没有成功.我可能错过了一些东西,我很难找到解决方案.

我有以下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 {}

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

我已经尝试了很多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( …

有没有一种方法可以直接从html中的标签角度到延迟加载组件<my-component></my-component>？

在组件模板解析期间,angular应该在找到任何html中没有或尚未加载的新标记时将整个组件加载到浏览器中.

我知道我们可以加载一个模块,使用loadChildren该模块仅特定于路由,还需要加载模块及其组件.我只搜索组件,直接搜索组件而不是模块.

我不想使用路由器或不想在我的应用程序中导入组件ot模块.我想当angular2找到一个不在html5中的标签时,它将在spcictfic文件夹中搜索并加载js和html文件并将该组件注入特定标签

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

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 …

长期的用户，第一次提问的人！我一直试图在两天的大部分时间内弄清这一点，但无济于事，所以我们开始吧。

从Angular2的外部源动态编译的模板？

我正在使用http从WordPress API获取HTML形式的页面内容。所以我有一个像这样的模板：

    <div [innerHTML] =“ contentHTML”> </ div>

而“ contentHTML”是组件中的字符串变量，并通过API调用异步分配了一个值，如下所示：

    <a routerLink="/help/faq.html"> </a>

我希望该routerLink能够正常工作。当然，routerLink可以是模板中有效的任何东西。

如果上述不可能

如果上述方法不起作用，那么如何解释传入的HTML并动态添加routerLink来替换标准href呢？

我有一个(我认为是一个相当常见的)问题,我找不到使用当前Angular 4.x架构解决的好方法.也许有一种方法我还没有找到,但我已经进行了广泛的搜索.

我想将一些动态的,用户生成的HTML内容插入到Angular应用程序中.这个HTML内容我还包括一些已知的(包含在模块声明中)应该呈现的角度组件.下面是一些puesdo-app HTML可能会帮助我解释:

<app-component>

    <!-- standard angular header and router-outlet -->
    <app-header>
        <app-nav>
            <ul>
                <li routerLink="/page-one">First Page</li>
                <li routerLink="/page-two">Second Page</li>
                <li routerLink="/page-three">Third Page</li>
            </ul>
        </app-nav>
    </app-header>
    <router-outlet></router-outlet>

    <!--
        the dynamic content would be inserted into the <main> element as HTML with angular <app-... tags
        the content in the HTML content inserted main tag could contain anything
        the angular components within the content should be initalized as normal
    -->
    <main>
        <h1>Title</h1>
        <app-component>
            <p>this component and its content should be initalized …