aplicar as páginas com o angular 2

Question

aplicar as páginas com o angular 2

Então eu criei um método tabsUL () onde estou tentando mostrar o valor no alerta, mas eu não estou obtendo,
fornecendo o meu codepen jquery abaixo
fornecendo também plnkr abaixo do qual não está a funcionar
Podem dizer-me como proceder?
violino a trabalhar https://codepen.io/texirv/pen/Vzdqpo

Não violino a trabalhar http://plnkr.co/edit/XMLRIGEJLnxK3Vv9Y8Ma?p=preview

  export class App {
    constructor() {
      this.name = 'Angular2'
    }

    tabsUL(): void {
      //console.log("I am here");
      //alert("I am here");
      var tab_id = $(this).attr('data-tab');
      alert("tab_id------>" + tab_id);
    }
  }

7

html css javascript jquery angular

Author: Daniel A. White, 2017-08-31

Source

4 answers

Uso páginas para editar dados como este:

É esse o tipo de páginas que procuras? (No plunker eles eram apenas itens da lista?)

Se assim for, consegui isto usando roteamento. Cada página é um componente separado com um modelo separado. Depois faço a rota entre eles quando o utilizador clica nas páginas.

Aqui o HTML que mostra as páginas e inclui a saída do router para o encaminhamento.

<div class="panel-body">
    <div class="wizard">
        <a [routerLink]="['info']" routerLinkActive="active">
            Basic Information  <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
                                                  !isValid('info')}"></span>
        </a>
        <a [routerLink]="['tags']" routerLinkActive="active">
            Search Tags  <span  [ngClass]="{'glyphicon glyphicon-exclamation-sign':
                                                  !isValid('tags')}"></span>
        </a>
    </div>

    <router-outlet></router-outlet>
</div>

Você pode encontrar o exemplo completo aqui: https://github.com/DeborahK/Angular-Routing na pasta APM-Final.

3

Author: DeborahK, 2017-09-05 14:47:29

Há três maneiras de conseguir isto.

1 - a forma mais fácil de o fazer seria usando as páginas de bootstrap: docs de Bootstrap

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1" (click)="DoSomeActionForTab1()">tab1</a></li>
  <li><a data-toggle="tab" href="#tab2" (click)="DoSomeActionForTab2()">tab2</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <h3>Tab1</h3>
    <p>Some content.</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>Tab2</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>

1-Você poderia fazer isso através de pontos de router nomeados, que é um pouco mais avançado: Docs

Html

<div class="panel-body">
    <div class="wizard">
        <a [routerLink]="[{ outlets: { tabs: ['tab1'] } }]" routerLinkActive="active">Tab1</a>
        <a [routerLink]="[{ outlets: { tabs: ['tab2'] } }]" routerLinkActive="active">Tab2</a>
    </div>
    <router-outlet name="tabs"></router-outlet>
</div>

Módulo de encaminhamento

{
  path: 'tab1',
  component: Tab1Component,
  outlet: 'tabs'
},
{
  path: 'tab2',
  component: Tab2Component,
  outlet: 'tabs'
}

3-existe também um pacote npm concebido para tabs: pacote npm

3

Author: Wesley Coetzee, 2017-09-06 11:29:25

Eu criei uma versão simples, semântica e funcional para você aqui:

Http://plnkr.co/edit/xIj0z7Xl7cI3nEF0yIJM?p=preview

Os principais problemas com o seu código foram que não estava a passar {[[0]} ao carregar numa página e não tinha css para mostrar o HTML como páginas

Para mais informações sobre a utilização do objecto $event no angular2, ver https://angular.io/guide/user-input#get-user-input-from-the-event-object

Actualizar: Aqui está um similar solução com uma abordagem programática para alterar o tab activo http://plnkr.co/edit/wflXtbu8d7vvU4puH8hc?p=preview

2

Author: itodd, 2017-09-05 08:49:14

score 2 · Accepted Answer

A maneira mais fácil que encontrei é através deste post e funciona bem e está de forma angular e facilmente extendível:

Tab.componente.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'tab',
  styles: [`
    .pane{
      padding: 1em;
    }
  `],
  template: `
    <div [hidden]="!active" class="pane">
      <ng-content></ng-content>
    </div>
  `
})
export class TabComponent {
  @Input('tabTitle') title: string;
  @Input() active = false;
}

Comprimidos.componente.ts

  import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
  selector: 'tabs',
  template:`
    <ul class="nav nav-pills nav-fill">
      <li class="nav-item" *ngFor="let tab of tabs" (click)="selectTab(tab)">
        <a class="nav-link" tabindex [class.active]="tab.active">{{tab.title}}</a>
      </li>
    </ul>
    <ng-content></ng-content>
  `
})
export class TabsComponent implements AfterContentInit {

  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

  // contentChildren are set
  ngAfterContentInit() {
    // get all active tabs
    let activeTabs = this.tabs.filter((tab)=>tab.active);

    // if there is no active tab set, activate the first
    if(activeTabs.length === 0) {
      this.selectTab(this.tabs.first);
    }
  }

  selectTab(tab: TabComponent){
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);

    // activate the tab the user has clicked on.
    tab.active = true;
  }

}

A tua.componente.html

<tabs #tabs>
  <tab  #foo tabTitle="foo">
tab foo content
</tab>
<tab #bar tabTitle="bar">
tab bar content
</tab>
</tabs>