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

时间:2017-08-09 07:29:01

标签: html5 angular

我有多个组件基础组件是欢迎组件而其他是子组件。欢迎组件内部有导航组件和其他组件。基于导航选择,我想改变身体组件。我该怎么办?

Welcome.component.html

let sectionIndex = 1
let set: IndexSet = [sectionIndex]
self.tableView.reloadSections(set, with: .automatic)

navigation.component.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>

1 个答案:

答案 0 :(得分:-1)

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

的index.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>

route.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'
        });

});

局部home.html的

博客和编辑也一样;