Question

我正在尝试使用ng2-bs3-modals在Angular 2中创建动态模态。我想根据传递给主组件视图中使用的选择器的参数动态填写模态html正文。当我使用这段代码时，它似乎将我的整个函数视为文本，因此我的模态显示我的'函数determineModalContent'的代码，而不是显示文件内容的预期行为。

我也知道我的代码不会返回文件的内容，只返回字符串，但我还没有弄清楚如何在Angular2 / TypeScript中读取文件内容。

import { Component, Input } from 'angular2/core'

@Component({
    selector: 'static-modal',
    template: '{{modalBody}}'
})


export class StaticModalComponent {
    @Input() modalID;
    template = 'app/shared/modals/static-message-1.html'
    modalBody = function determineModalContent(modalID){
            if(modalID == "1")
                return 'app/shared/modals/static-message-1.html';
            else if(modalID == "2")
                return 'app/shared/modals/static-message-2.html';
            else   
                return 'app/shared/modals/static-message-default.html';
    }
}

Answer 1

我想你需要的是像 ng-include 这样的东西。正如您在Angular回购中的issue中所看到的，我们很可能不会得到该指令。我们是否需要这个指令已经进行了长时间的讨论，如果没有提供我们如何通过自己实现它。

我试图举例说明如何实现它。

@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 ;
    }
}

要进行演示检查，请Plunker。

Answer 2

由于我理解的多种原因，包括您将看到的下划线，它可能会被诽谤为“verboten”，但这有效。事实是我需要非常简单地执行此操作，并且我不想（也不应该）编写大量代码来执行此操作。我可以擦除HTML等。如果这比答案更有帮助，我会得到，但有些人可能会觉得它很有用。

在组件API（ES6样式）中，声明一个查询条目（或者使用TS创建ViewChild），这应该映射到具有模板引用变量的元素，依此类推。请注意，使用我在此处显示的组件API的查询部分在TS中工作正常：

  // Assumes you have <div #targetdiv></div> in your component template
  queries: {
    targetDivRef : new ViewChild ( 'targetdiv' )
  }

然后在一些单击处理程序，onInit或其他内容（请记住不要在comp生命周期中过早地尝试这个）获取您想要异步的页面，并将内容转储到div中。

   let elem = this.targetDivRef.nativeElement;

   let svc = this.http.get ( './thepage.html' )
      .map ( response => { return response [ '_body' ] } );

   svc.subscribe (
      ( x ) => { elem.innerHTML = x },
      ( err ) => console.log ( err ),
      ( ) => console.log ( 'Complete' )
    )

同样，几乎肯定不是“推荐”。但它很简单，而且很有效。你实际上甚至不需要订阅，你可以在map func中设置val，这只是更完整等等。

当我们得到一个类似于ng-include（恕我直言，这是一个明显的省略）的选项，或者其他三行选项，我将进行切换。根据需要处理请求错误等。

Answer 3

如果模板不同，您可以在同一个html文件中添加所有不同的实体，并选择使用*ngIf指令显示哪个：

<modal>
  <modal-header>
    <h4 class="modal-title">Title</h4>
  </modal-header>
  <modal-body>
    <div *ngIf='modalID == "1"'>
        content1
    </div>
    <div *ngIf='modalID == "2"'>
        content2
    </div>
    <div *ngIf='modalID != "1" && modalID != "2"'>
        content3
    </div>
  </modal-body>
  <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

在Angular 2中将HTML文件读入模板？

3 个答案: