如何以角度4在另一个html页面中的html页面上显示

Question

您好，我正在开发 Angular 4

我想知道的是我们如何将(click)上的HTML页面绑定到另一个HTML页面中

我尝试过*ng-if 和<ng-template>，但对我没有用

所以我只使用了基本的 HTML 和 Bootstrap tab-pane fade 和 data-toggle 作为我的菜单

但我想为以下三个菜单项设置单独的 HTML 页面，并希望在单击相应的菜单时绑定这些相应的页面

我想在点击菜单时弹出一个模态框，但我在另一个文件夹中有一些常见的模态框

<ul class="nav nav-tabs flex-column" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#myappdefinitions" data-toggle="tab">My app definitions</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#shared" data-toggle="tab">shared with me</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#others" data-toggle="tab">shared with others</a>
  </li>
</ul>

<div id="apptab">
  <div class="row justify-content-between">
    <div class="tab-content col-7">
      <div class="row tab-pane fade show active" id="myappdefinitions">
        <p class="text-muted">You have one app definition</p>
      </div>
      <div class="row tab-pane fade" id="shared">
        <p class="text-muted">you are in shared apps</p>
      </div>
      <div class="row tab-pane fade" id="others">
        <p class="text-muted">you are in shared with others</p>
      </div>
    </div>
  </div>
  <div class="input-group">
    <span class="input-group-addon search-img">
                <i class="fa fa-search img-search" aria-hidden="true"></i>
              </span>
    <input type="text" class="form-control search-box" (click)="filterDelayed()" placeholder="search">
  </div>
</div>

Answer 1

您可以使用 Angular 材质来做到这一点。这是一个 Angular 的 UI 实用组件库。

在 HTML 文件中

<li class="nav-item">
    <a class="nav-link active"  data-toggle="tab" (click)="openSomeModal()">My app definitions</a>
</li>

在 TS 文件中

import { MatDialog } from '@angular/material';
 ....
 public dialog;

 constructor(public dialog: MatDialog) {}

     openSomeModal() {
         const data = {};
         const dialogRef = this.dialog.open(yourModalComponent, {
             data: data,
             width: '400px',
             panelClass: 'any-class',
         });
    }
.....

在您的模块中，您必须导入材料。

查看这个 Angular Material 参考link

Answer 2

我用过 ngx-bootstrap

你可以看到下面的链接

ngx-bootstrap

我可以做这个按钮，并且相应的模型在同一个 HTML 页面中

如果它们在不同的 HTML 页面中，我仍然不知道如何绑定它们。

import {
  Component,
  OnInit,
  TemplateRef
} from '@angular/core';
import {
  Router
} from '@angular/router';
import {
  BsModalService
} from 'ngx-bootstrap/modal';
import {
  BsModalRef
} from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
  selector: 'app-application-dashboard',
  templateUrl: './application-dashboard.component.html',
  styleUrls: ['./application-dashboard.component.css']
})
export class ApplicationDashboardComponent implements OnInit {
  modalRef: BsModalRef;

  constructor(private router: Router, private modalservice: BsModalService) {}

  ngOnInit() {}
  createApp(template: TemplateRef < any > ) {
    this.modalRef = this.modalservice.show(template);
  }
}

<button type="button" class="btn btn-default" (click)="createApp(template)" translate="">Create App</button>
<ng-template #template>
  <div class="modal-header">
    <h2>Create a new app definition</h2>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
  </div>
  <div class="modal-body">
    <p>You need to give a name for the new app definition and you may want to add a description at the same time.</p>
    <div class="form-group">
      <label for="newAppName">App definition name</label>
      <input ng-disabled="model.loading" type="text" class="form-control ng-pristine ng-valid ng-touched" id="newAppName" ng-model="model.app.name" custom-keys="" enter-pressed="ok()" auto-focus="">
    </div>
    <div class="form-group">
      <label for="newAppKey">App definition key</label>
      <input ng-disabled="model.loading" type="text" class="form-control ng-pristine ng-untouched ng-valid" id="newAppKey" ng-model="model.app.key">
    </div>
    <div class="form-group">
      <label for="newAppDescription">Description</label>
      <textarea ng-disabled="model.loading" class="form-control ng-pristine ng-untouched ng-valid" id="newAppDescription" rows="5" ng-model="model.app.description"></textarea>
    </div>
  </div>
  <div class="modal-footer">
    <div class="pull-right">
      <button type="button" class="btn btn-sm btn-default ng-binding" ng-click="cancel()" ng-disabled="model.loading">
          Cancel
        </button>
      <button type="button" class="btn btn-sm btn-default ng-binding" ng-click="ok()" ng-disabled="model.loading || !model.app.name || model.app.name.length == 0 || !model.app.key || model.app.key.length == 0" disabled="disabled">
          Create new app definition
        </button>
    </div>
    <div class="loading pull-right ng-hide" ng-show="model.loading">
      <div class="l1"></div>
      <div class="l2"></div>
      <div class="l2"></div>
    </div>
  </div>
</ng-template>

Answer 3

您应该创建另一个组件（让我称之为child）并将其导入其父组件（在.ts 文件中），然后在父.html 文件中调用子组件的选择器（标签）并创造你想要的任何东西。