如何根据另一个 div 单选按钮显示 div 标签?

Question

我有多个组件 基本组件是欢迎组件，其他是子组件。 在欢迎组件中具有导航组件和其他组件。 根据导航选择，我想更改正文组件。 我能做什么？

欢迎光临.html

组件

<div style="height: 140px;">
<h1 class="col-md-3" style="text-align: center">Hi {{currentUser.name}}!
</h1>
<app-nav></app-nav>
</div>
<div>
<app-home *ngIf="slideItem=='home'"></app-home>
<app-blog *ngIf="slideItem=='blog'"></app-blog>
<app-about *ngIf="slideItem=='about'"></app-about>
</div>

导航组件.html

<nav class="slidemenu col-md-6">
<input type="radio"  [(ngModel)]="slideItem" value="home" name="slideItem" id="slide-item-1" class="slide-toggle" />
<input type="radio" [(ngModel)]="slideItem" value="edit" name="slideItem" id="slide-item-2" class="slide-toggle"/>
<input type="radio" [(ngModel)]="slideItem" value="blog" name="slideItem" id="slide-item-4" class="slide-toggle"/>
</nav>

Answer 1

你可以在 angular js 中使用 ui-router。

索引.html

<div class="container">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
<div ui-view></div>
</div>

路线.js

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('about', {
url: '/edit',
templateUrl: 'partial-edit.html'
});
});

部分家庭.html

博客和编辑相同;