Question

我正在学习角度，我想创建一个带有顶部导航栏的页面。

按下导航栏上的链接，我希望显示相应的组件。

例如，如果我在＆＃34; ShoppingList＆＃34;上按导航栏。我希望只显示页面上已经显示的购物清单组件。如果我按下另一个链接，我希望只有匹配的组件可见。

我已将每个组件放在＆＃39; app＆＃39;内的分隔文件夹中。夹。我的问题是我如何使用ngIf但是使用不同文件夹中的组件而不是所有文件夹都在同一个组件上？

app.component.ts：

<navbarBlack></navbarBlack>
    <recipeList></recipeList>
    <recipe></recipe>
    <shoppingList></shoppingList>

navbar html：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
   <div class="navbar-header">
     <a class="navbar-brand" href="#">{{WebSiteName}}</a>
   </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">{{HomePage}}</a></li>
      <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{PageA}}
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">{{Page1A}}</a></li>
          <li><a href="#">{{Page2A}}</a></li>
          <li><a href="#">{{Page3A}}</a></li>
        </ul>
      </li>
      <li><a href="#" (click)="goRecipies()">{{PageB}}</a></li>
      <li><a href="#" (click)="goShopList()">{{PageC}}</a></li>
    </ul>
  </div>
</nav>

单击

上的（click）将布尔值变为true。

Answer 1

您想用* ngIf替换Angular Router的路由功能吗？隐藏/显示组件？我认为这是一个可怕的想法，但是有可能。如果您的结构是：

app
 navbar_component
 component_1
 component_2
 component_3

这意味着如果单击navbar_component中的链接，则要显示/隐藏navbar_component的兄弟组件。因此，最直接的方法是将这些事件发送到父（app）组件，该组件将布尔属性绑定到他的子组件。如果这些属性的值发生更改，Angular会触发更改检测并重新呈现视图。

navbar.html：

<a (click)="component1()">Comp1</a>

navbar.ts：

@Output
compt1: EventEmitter = new EventEmitter();

constructor(){}

component1(){
 this.comp1.emit();
}

app.component.html：

<navbar-component (compt1)="showComp1()"></navbar-component>
<component_1 [showMe]="showComp1"></component_1>

app.component.ts：

showComp1: boolean = false;
showComp2: boolean = false;
showComp3: boolean = false;

constructor() {}

showComp1() {
 this.showComp2 = false;
 this.showComp3 = false;
 this.showComp1 = true;
}

component_1.html：

<div *ngIf="showMe">
 Content
</div>

component_1.ts：

@Input showMe : boolean

所有组件的逻辑相同:)正如你看到它有点疯狂。更好地使用路由器

Answer 2

在朋友的帮助下，我设法解决了我的问题，并按照我想要的方式完成了我的项目。

这就是我们提出的：

我想用ngIf切换可见性的两个组件我已将它们的html标签放在navbar.component.html中：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" (click)="showAll()">{{WebSiteName}}</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="#" (click)="showAll()">{{HomePage}}</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{PageA}}
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">{{Page1A}}</a></li>
      <li><a href="#">{{Page2A}}</a></li>
      <li><a href="#">{{Page3A}}</a></li>
    </ul>
  </li>
  <li><a href="#" (click)="goRecipies()">{{PageB}}</a></li>
  <li><a href="#" (click)="goShopList()">{{PageC}}</a></li>
</ul>
</div>
</nav>

<recipeList *ngIf="toShopList"></recipeList>  <-- first component
<shoppingList *ngIf="toRecipies"></shoppingList>  <-- second conponent

在app.component.html中，我只放置了导航栏标记

当然，我已经将两个组件导入了navbar ts文件，其中包含与ngIf一起使用的函数：

import { Component } from '@angular/core';
import { RecipeComponent } from '../recipe/recipe.component';
import { ShoppingListComponent } from '../shoppingList/shoppingList.component';
import { RecipeListComponent } from '../recipeList/recipeList.component';



@Component({
  selector: 'navbarBlack',
  templateUrl: './navbar.component.html'

})
export class NavbarComponent {
  WebSiteName = 'Recipe Book';
  HomePage = 'Home';
  PageA = 'Manage';
  Page1A = 'SubPage 1';
  Page2A = 'SubPage 2';
  Page3A = 'SubPage 3';
  PageB = 'Recipes';
  PageC = 'Shopping List';


  toRecipies:boolean = true;
  toShopList:boolean = true;

  goRecipies() {

    this.toRecipies = false;
    this.toShopList = true;
  }

  goShopList() {
    this.toShopList = false;
    this.toRecipies = true;
  }

  showAll(){
    this.toRecipies = true;
    this.toShopList = true;
  }
}

角度2 - ngIf分离文件夹中的组件

2 个答案: