webentwicklung-frage-antwort-db.com.de

Dynamische Vorlage in TemplatURL in angle2

Ich habe in Winkel 1 ng-include verwendet, wenn ich ein Tamplate dynamisch in die Seite einfügen musste.

Nun, wie man dies in Winkel 2 erreichen kann. Ich habe versucht zu suchen und habe diese gefunden:

https://groups.google.com/forum/#!topic/angular/ROkKDHboWoA ,

https://github.com/angular/angular/issues/2753

kann jemand erklären, wie dies in angle2 zu tun ist, da der Link sagt, dass ng-include aus Sicherheitsgründen nicht enthalten ist.

Oder zumindest die Verwendung einer verifizierbaren in templateUrl-Eigenschaft, damit der verifizierbare Wert serverseitig verarbeitet werden kann, um die Vorlage bereitzustellen ...

16
binariedMe

Und wie Sie in diesem issue auf dem Angular Repo sehen können, erhalten wir diese Direktive höchstwahrscheinlich nicht. Es wurde lange diskutiert, ob wir diese Richtlinie brauchen oder nicht und ob nicht angegeben, wie wir sie selbst umsetzen können. 

Ich habe versucht, ein einfaches Beispiel dafür zu finden, wie es implementiert werden kann. 

@Component({
    selector: 'my-ng-include',
    template: '<div #myNgIncludeContent></div>'
})
export class MyNgInclude implements OnInit {

    @Input('src')
    private templateUrl: string;

    @ViewChild('myNgIncludeContent', { read: ViewContainerRef })
    protected contentTarget: ViewContainerRef;

    constructor(private componentResolver: ComponentResolver) {}

    ngOnInit() {
        var dynamicComponent = this.createContentComponent(this.templateUrl);
        this.componentResolver.resolveComponent(dynamicComponent)
            .then((factory: any) => this.contentTarget.createComponent(factory));
    }

    createContentComponent(templateUrl) {
        @Component({
            selector: 'my-ng-include-content',
            templateUrl: templateUrl,
            directives: FORM_DIRECTIVES,
        })
        class MyNgIncludeContent {}
        return MyNgIncludeContent ;
    }
}

Für eine Demo überprüfen Sie diese Plunker

11
S.Klechkovski

In der aktuellen Version ist Winkel 2 nicht enthalten. Ich glaube nicht, dass diese Funktion in den hinzugefügten Links enthalten ist.

Es kann ein Stück Javascript verwendet werden, um eine Vorlage dynamisch mit Hilfe eines Ajax-Aufrufs hinzuzufügen.

Möglicherweise steht in Zukunft eine dynamische Vorlagenlader-Bibliothek zur Verfügung.

3
binariedMe

Wie @binariedMe genau beschreibt, ist ng-include aus Sicherheitsgründen in Angular 2 deaktiviert. Die empfohlene Methode ist die Verwendung einer benutzerdefinierten Direktive mit etwas mehr programmatischem Aufwand.

Um Ihren Angular -Code für 2.0 vorzubereiten:

myApp.directive('myInclude', function() {
    return {
        templateUrl: 'mytemplate.html'
    };
});

Und anstatt ng-include für ein Element zu verwenden, fügen Sie einfach my-include hinzu:

<div my-include></div>
1
Wtower

Stand alpha.46 (und mit ES6 JS):

In die parent -Dateiimportdatei, die Sie einfügen wollten:

@Component({
  selector: 'account'
})
@View({
  templateUrl: './folder/containing/template.html'
})

So einfach ist das.

Wenn Sie eine Komponente importieren wollten, tun Sie dies in der Datei parent:

import ComponentClassName from './folder/with/componentName';

...

@View({
  directives: [ComponentClassName]
})

Und in der importierten Datei der child/Komponente: 

Definieren Sie Ihre ComponentClassName (Sie können templateUrl zum @View hinzufügen, wie oben gezeigt).

Vergessen Sie nicht export default ComponentClassName; am Ende der Datei.

Es gibt nicht viele Beispiele in den offiziellen Angular 2-Dokumenten, aber Sie stolpern darüber gelegentlich .

1
sdnyco

Nach @binariedMe und diesem Blogbeitrag http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/ konnte ich eine Lösung konstruieren, die für Sie geeignet ist. Die Verwendung eines Aufrufs AJAX und das dynamische Erstellen der benutzerdefinierten Komponente aus dem zurückgegebenen HTML-Inhalt sollten dieses Problem beim Erstellen einer neuen benutzerdefinierten Direktive my-ng-include beheben.

import {
  Component,
  Directive,
  ComponentFactory,
  ComponentMetadata,
  ComponentResolver,
  Input,
  ReflectiveInjector,
  ViewContainerRef
} from '@angular/core';
import { Http } from '@angular/http';

export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
    const cmpClass = class DynamicComponent {};
    const decoratedCmp = Component(metadata)(cmpClass);
    return resolver.resolveComponent(decoratedCmp);
}

@Directive({
    selector: 'my-ng-include'
})
export class MyNgInclude {

    @Input() src: string;

    constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver, private http: Http) {
    }

    ngOnChanges() {
      if (!this.src) return;

      this.http.get(this.src).toPromise().then((res) => {
        const metadata = new ComponentMetadata({
            selector: 'dynamic-html',
            template: res.text(),
        });
        createComponentFactory(this.resolver, metadata)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
          });
      });
    }
}

Verwenden Sie es einfach wie folgt:

<my-ng-include [src]="someChangingProperty"></my-ng-include>
0
thejava