Question

请在这里添加＆＃34;活跃＆＃34;在＆＃34; lang＆＃34;单击菜单后的类名div。就像用户点击＆＃34;英语＆＃34;菜单然后＆＃34;活跃＆＃34; class add in＆＃34; english＆＃34;名称ID部分以及用户点击＆＃34;印地语＆＃34;菜单＆＃34;活跃＆＃34;课程加入＆＃34;印地文＆＃34;名称ID部分并从＆＃34;英语＆＃34;中删除name id setion和除＃34; hindi＆＃34;之外的所有部分。名称ID部分。

我在jquery中添加了我的要求，但我在Angular 4中需要这个功能

＆＃13;

$(document).ready(function(){
		$('ul li').click(function(){
			var dl = $(this).attr('data-lang');
			$(this).addClass('active');
			$(this).siblings().removeClass('active');
			$('.lang').removeClass('active');
			$('#'+dl).addClass('active');
		});
	});

＆＃13;

ul{margin:0; padding:0;}
ul li{list-style:none; display:inline-block; padding:7px 10px; background:#000; color:#fff; border-radius:3px;}
.clear{clear:both: height:40px;}
.lang{display:none; background:#f3f7f8; padding:30px;}
.lang.active{display:block !important;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li data-lang="english" class="active">English</li>
<li data-lang="hindi">Hindi</li>
<li data-lang="telugu">Telugu</li>
</ul>
<div class="clear"></div>
<div class="lang active" id="english">Show English Section</div>
<div class="lang" id="hindi">Show Hindi Section</div>
<div class="lang" id="telugu">Show Telugu Section</div>

＆＃13;

Answer 1

这是 Angular方式的要求，我还创建了 Plunker 。

我使用了*ngIf，(click)和[ngClass] Angular指令。

ngClass指令更改绑定到的类属性它附加的组件或元素。

<强>步骤：

我已经采用了一个活动变量来保持当前活动的li
我添加了一个点击功能绑定，并调用了 setActive 功能，使当前点击li处于有效状态。
我删除了您的jquery和data-lang代码并以有角度的方式完成。
我添加了* ngIf来显示所需的lang类。
最后，我使用[ngClass]使该课程成为活跃的li，具体取决于variable

<强>代码：

import { Component } from '@angular/core';
import { Modal } from 'ng2-modal'

@Component({
  selector: 'my-app',
  directives: [Modal],
  template: `
  <ul>
    <li (click)="setActive('english')" class="active">English</li>
    <li (click)="setActive('hindi')">Hindi</li>
    <li (click)="setActive('telugu')">Telugu</li>
  </ul>
<div class="clear"></div>
<div class="lang" *ngIf="active == 'english'" [ngClass]="{'active':active == 'english'}" id="english">Show English Section</div>
<div class="lang" *ngIf="active == 'hindi'" [ngClass]="{'active':active == 'hindi'}" id="hindi">Show Hindi Section</div>
<div class="lang" *ngIf="active == 'telugu'"[ngClass]="{'active':active == 'telugu'}"  id="telugu">Show Telugu Section</div>
  `
})
export class AppComponent { 
  public active = "english"

  setActive(lang){
    this.active = lang;
  }

}

Here is a working Plunker

Answer 2

您可以使用Angular [class.className]="condition"语法。

在我的系统中为语言创建模型或界面是一种很好的做法（至少对我自己而言）。通过这种方式，您可以获得完整的打字稿功能，并且可以更轻松地使用语言。

如果您不需要对对象进行动态更改，我会选择界面，尤其是如果您不需要任何自定义的getter和setter。

// interfaces/Language.ts

export interface Language {
    id: number;
    name: string;
}

在您的组件中，您将拥有一系列语言（或者您可以使用服务，这对我来说也更有意义）。

@Component({/* ... */})
export class SomeComponent {

    languages: Language[];
    activeLanguage: Language;

    constructor() {
        this.languages = [
            { id: 1, name: 'English' },
            { id: 2, name: 'Hindi'   },
            { id: 3, name: 'Telugu'  },
        ];
        // You can also create a default logic for setting activeLanguage
        // e.g.: set the active language based on data from some service
        // or just set the default language (English for example)
        this.activeLanguage = this.languages[0];
    }
}

通过这种方式，您可以更轻松，更短，更易读地使用语言选择模板。如下：

<ul *ngIf="languages.length">
    <li *ngFor="let language of languages" 
        (click)="activeLanguage = language"
        [class.active]="activeLanguage === language">
        {{ language.name }}
    </li>
</ul>

如果您想要显示所有部分，但仅将活动课程添加到activeLanguage部分，请执行以下操作：

<div class="lang" [class.active]="activeLanguage.id === 1">Show English Section</div>
<div class="lang" [class.active]="activeLanguage.id === 2">Show Hindi Section</div>
<div class="lang" [class.active]="activeLanguage.id === 3">Show Telugu Section</div>

如果您只想显示activeLanguage部分，则不必担心课程，因为只会显示所选语言的部分

<div *ngIf="activeLanguage.id === 1" class="lang active">Show English Section</div>
<div *ngIf="activeLanguage.id === 2" class="lang active">Show Hindi Section</div>
<div *ngIf="activeLanguage.id === 3" class="lang active">Show Telugu Section</div>

请注意，在此示例中，不需要active类，因为只显示的部分是活动部分。

另外，请记住，如果有任何方法可以动态地为各个部分创建内容，您可以再次循环使用这些语言，这将再次导致更短更简单的语法，如下所示： / p>

<div *ngFor="let language of languages"
     class="lang"
     [class.active]="activeLanguage === language">
    <!-- Build content somehow -->
</div>

希望我能清除一点。

单击Angular 4

2 个答案: