Question

我使用Angular2模式使用<ng-content>动态创建内容。让我向你解释一下我做了什么。

我创建了一个带有选择器的模态组件＆＃39; app-modal＆＃39;它的模板包含<ng-content>，我将在其中动态加载内容。

现在，我有另一个组件，我需要在动态内容的不同点击上显示特定的模态。

所以，我会有两个＆＃34; app-modal＆＃34;在我的页面上有不同的内容。

我需要知道这种方法，我如何参考我想要在特定点击上显示的相应模式。

目前，当我点击任何链接时，它总是打开页面上的第一个模态。我知道我错过了一些东西，或者我们可以参考我们想要展示的各个模态。

提前致谢。

以下是 modal.component.ts

中的代码

    @Component({
  selector: 'app-modal',
  templateUrl: './app-modal.component.html',
  styleUrls: ['./app-modal.component.css']
})
export class AppModalComponent implements OnInit {

    @ViewChild('content') modal: ElementRef;
    public modalClose: NgbActiveModal;
  constructor(public modalService: NgbModal) { }

    ngOnInit() {
    }
    open() {
    this.modalClose = this.modalService.open(this.modal, { windowClass: 'modal-wrapper' });
  }


  close(){
    this.modalClose.close();
  }
}

modal.component.html

中的代码

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <ng-content select=".modal-body"></ng-content>
    <ng-content select=".modal-footer"></ng-content>

</ng-template>

以下是我的 page.component.html 的代码，我在其中调用click方法来显示相应的模式。

<h3 (click)="openModalOne()">Open Modal One</h3>
<h3 (click)="openModalTwo()">Open Modal Two</h3>

    <app-modal>
        <div class="modal-body">
            Body of modal 1.
        </div>
        <div class="modal-footer">
            Footer of modal 1.
        </div>
    </app-modal>


    <app-modal>
        <div class="modal-body">
            Body of modal 2.
        </div>
        <div class="modal-footer">
            Footer of modal 2.
        </div>
    </app-modal>

以下是我的 page.component.ts 代码

import { AppModalComponent } from './app-modal/app-modal.component';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class AppComponent {
  constructor (private modalService: NgbModal ) {}

  @ViewChild(AppModalComponent)
  private modal: AppModalComponent;

   openModalOne() {
    console.log("Inside open modal one");
    this.modal.open();
  }
  openModalTwo() {
    console.log("Inside open modal two");
    this.modal.open();
  }
}

Answer 1

使用@ViewChild('varName')和模板变量(<tag #varName>)来获取具有多个相同类型的特定元素。你应该尽量避免直接访问，如果可能的话，使用绑定。

使用<ng-content>在同一组件/页面中的相应点击事件上显示带有动态内容的多个ng-modals

1 个答案: