Stackblitz

Question

我必须将所有string[] foo = { "Bar", "Baz", "Ban" }; XmlSerializer serializer = new XmlSerializer(typeof(string[])); string file = "File.xml"; using (StreamWriter sw = new StreamWriter(file)) { serializer.Serialize(sw,foo); } using (StreamReader sr = new StreamReader(file)) { //serializer = new XmlSerializer(typeof(string)); //Uncomment me to see your error message var test = serializer.Deserialize(sr); Console.WriteLine(test.ToString()); }放在一个ngx-bootstrap modals中，这样我才能从任何地方访问任何模态。

我在

中尝试了以下代码

component.html

StackBlitz处的完整代码。

我在HTML中使用模板引用对象。它在header.componentn.html <button (click)="Login(loginModal)">Login</button> header.cmponent.ts @Input() myModal: AppModalsComponent; bsModalRef: BsModalRef; Login(template:TemplateRef<any>) { this.myModal.openModal(template); } app-modals.component.html <ng-template #loginModal> <div class="modal-body">Login Here</div> </ng-template> app-modals.component.ts openModal(template: TemplateRef<any>) { this.modalRef = this.modalService.show(template, this.config); }中未定义。我认为这是因为相应的ng-template不存在于同一个HTML中。如何重新获得这个？

Answer 1

根据您在模态服务上调用show()的文档和

将TemplateRef或组件作为第一个参数传递，并将配置作为第二个参数（可选）。

为了使这些模态更容易分享，我只想让每个模态成为它自己的组件。您需要确保在entryComponent中将其声明为app.module。

然后，在需要打开模态的任何组件中，您只需注入模态服务，然后传递您希望它创建的ModalComponent。

modal.component.ts

@Component({
  selector: 'app-modal',
  template: '<div class="modal-body">Login Here</div>'
})
export class ModalComponent {}

some.componet.ts

@Component({
  selector: 'app-some',
  template: '<button (click)="openModal">Open the modal</button>'
})
export class SomeComponent {
  constructor(public modalService: BsModalService) { }

  openModal() {
    this.modalService.show(ModalComponent);
  }
}

Angular TemplateRef问题

1 个答案:

Stackblitz