Question

我想在我的菜单和模态中分离2个组件。

 <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"  aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" (click)="clickButton()" >
         <span class="navbar-toggler-icon"></span>
     </button>
     <a class="navbar-brand" href="#home">{{menu_title}}</a>

     <div class="collapse navbar-collapse" id="navbarSupportedContent" [collapse]="isCollapsed">
         <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
                 <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
             </li>
             <li class="nav-item">
                 <a  (click)="open(content)" class="nav-link" href="#">Ajouter</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" href="#quitter">Quitter</a>
             </li>
         </ul>
         <form class="form-inline my-2 my-lg-0">
             <input class="form-control mr-sm-2" type="text" placeholder="Search">
             <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
         </form>
     </div>
 </nav>

 <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>
     <div class="modal-body">
         <p>One fine body&hellip;</p>
     </div>
     <div class="modal-footer">
         <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
     </div>
 </ng-template>

一旦我将'ng-template'和我的'nav'分成2个不同的部分组件，我有一个错误。例如（一个组件带nav的“nav.component”和带有的一个组件“modal.component” ng-template和“ModalComponent”类

NavComponent.html：13 ERROR TypeError：co.open不是函数在Object.eval [as handleEvent]（NavComponent.html：13） at handleEvent（core.es5.js：11798） at callWithDebugContext（core.es5.js：13006） at Object.debugHandleEvent [as handleEvent]（core.es5.js：12594） at dispatchEvent（core.es5.js：8773）在core.es5.js：9363 在HTMLAnchorElement。（平台browser.es5.js：2683）在ZoneDelegate.webpackJsonp.526.ZoneDelegate.invokeTask（zone.js：398） at Object.onInvokeTask（core.es5.js：4116）在ZoneDelegate.webpackJsonp.526.ZoneDelegate.invokeTask（zone.js：397）在Zone.webpackJsonp.526.Zone.runTask（zone.js：165）在HTMLAnchorElement.ZoneTask.invoke（zone.js：460）

但是如果我在 ONE 组件中写下所有html，那么就有了当然是ModalComponent类

 export class ModalComponent implements OnInit {

     closeResult: string;

     constructor(private modalService: NgbModal) { }

     open(content) {
         this.modalService.open(content).result.then((result) => {
             this.closeResult = `Closed with: ${result}`;
         }, (reason) => {
             this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
         });
     }

     private getDismissReason(reason: any): string {
         if (reason === ModalDismissReasons.ESC) {
             return 'by pressing ESC';
         }
         else if (reason === ModalDismissReasons.BACKDROP_CLICK)
         {
             return 'by clicking on a backdrop';
         }
         else
         {
             return  `with: ${reason}`;
         }
     }

     ngOnInit() {

     }

 }

效果很好。

实际上我没有问题让它运行，但我喜欢有一个很好的结构，我想知道是否有可能将一个成分分解为2个？（我花了4个小时尝试所有 combinaisons（在我的app.module中更改导入模块的顺序等....在root中以不同的方式调用我的组件，）没什么做。

这是我想要的结构。但应用力量我要么导航要么莫代尔。 ![enter image description here] 1

先谢谢你的帮助！:)

包含组成角4声明

0 个答案: