Угловой 2 одушевленный

angular

2488 просмотра

3 ответа

Я проверял следующие угловые 2 одушевленных документа: https://angular.io/docs/ts/latest/guide/animations.html

и начал играть с ним. Я пошел для простейшего примера и сделал следующее:

Добавлено в мой компонент:

animations: [
    trigger('dataState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

добавил в мой шаблон:

<div class="well"
[@dataState]="data.active"
 (click)="data.toggleState()" style="cursor:pointer">
SOME TEXT
</div>

Наверняка все импортировали ..

import {Component,OnInit,
trigger,
  state,
  style,
  transition,
  animate} from '@angular/core';

но когда я щелкаю свой объект, я получаю:

browser_adapter.js:86 TypeError: self.context.$implicit.toggleState is not a function

Так как toggleState отсутствует в документации, я попытался удалить его, но эффект анимации все же отсутствовал (хотя ошибки не было)

Чего мне не хватает?

Автор: TheUnreal Источник Размещён: 08.11.2019 11:00

Ответы (3)


3 плюса

Значение, которое вы назначаете для @dataState, [@dataState]="data.active"может быть 'active'или 'inactive'в вашем примере. (ну, значение может быть другим, но никакого эффекта не будет, если вы его не укажете)

Таким образом, ваш component.ts нуждается в свойстве data.active, которое имеет любое из них в качестве значения. То, что вызывает анимацию, является изменением между ними:

[@dataState]="'active'" к [@dataState]="'inactive'"или наоборот

data.activeэто просто переменная и data.toggleState()функция, которая присваивает 'active'или 'inactive'ей.

Автор: j2L4e Размещён: 20.08.2016 03:28

1 плюс

Я столкнулся с этим также. Я обнаружил, что большинство документов проведут вас через каждый необходимый шаг, но здесь пропущено добавление некоторых настроек. Я предполагаю, что они предполагают, что к этому моменту в документах некоторые вещи говорят сами за себя.

Если вы посмотрите на пример « живого плунжера» и просмотрите код, вы увидите, как они его настроили.

В app / hero.service.ts они добавили конструктор, который добавляет строку hero.state и метод toggleState () в класс Hero.

class Hero {
  constructor(public name: string,
              public state = 'inactive') {
  }

  toggleState() {
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }
}

Исходя из вашей ошибки и вопроса, кажется, что вы еще не добавили ни одного из них, поэтому toggleState () не является функцией, и ничто не может быть переключено без атрибута состояния.

Для вашего примера вы можете (в зависимости от вашего класса) сделать что-то вроде этого:

import { Component, Input, trigger, state, style, transition, animate } from '@angular/core';
@Component({
  selector: 'basic-component',
  template: `
    <div class="well" [@dataState]="active" (click)="toggleState()" style="cursor:pointer">SOME TEXT</div>
  `,
  animations: [
    trigger('dataState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.5)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ] 
})
export class BasicComponent {
  active = 'inactive';
  toggleState() {
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }
}
Автор: user3366016 Размещён: 11.10.2016 07:02

1 плюс

Я также обнаружил, что документация по анимации на angular.io неполная. Я использовал пример кода и внес несколько небольших изменений, чтобы он работал с кодом из учебника по приложениям TOH .

TL; DR

Добавьте state="inactive"свойство в класс hero.ts для отслеживания состояния анимации каждого героя.

В HTML измените (click)="hero.toggleState()"привязку их метода (click)="toggleState(hero)"и напишите этот метод в классе HeroesComponent:

toggleState(hero: Hero) { hero.state = (hero.state === 'active' ? 'inactive' : 'active'); }

Перепишите onSelect()метод, чтобы gotoDetail()навигация работала.

Рабочий план, который следует за шагами ниже

Вот плункер, который они предоставляют всем, что выполнено в разделе 5 - маршрутизация. Используйте его, чтобы следовать, если хотите.

Я собираюсь рассказать, как изменить этот план, чтобы получить первую анимацию в их документе.

Первый код, через который они частично проводят вас в документах по анимации, - это добавление анимированных активных / неактивных состояний к выбранным героям в представлении «Герои» (в отличие от представления «Панель управления»):

import { Component, Input, trigger, state, animate } from '@angular/core';
import { Heroes } from './hero.service';
@Component({
  moduleId: module.id,
  selector: 'hero-list-basic',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
          [@heroState]="hero.state"
          (click)="hero.toggleState()">
        {{hero.name}}
      </li>
    </ul>
  `,
  styleUrls: ['hero-list.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})
export class HeroListBasicComponent {
  @Input() heroes: Heroes;
}

Выше, их (пример анимации) код параллелен коду в app / heroes.component.ts (из plnkr) и обратите внимание, что html / css были извлечены в отдельные файлы на plnkr. Я предполагаю, что большинство, кто прочитал это, следовало за учебником и знакомо с этим кодом.

heroes.component.html Новые анимации будут в основном повторять существующие привязки для каждого героя <li>, поэтому удалите эти две строки - потому что они будут конфликтовать, если мы их сохраним - мы собираемся вернуть эту функциональность обратно с состояниями анимации.

<ul class="heroes">
  <li *ngFor="let hero of heroes">

    --------->[class.selected]="hero === selectedHero"
    --------->(click)="onSelect(hero)">

    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

Пример нового HTML из анимации:

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [@heroState]="hero.state"
    (click)="hero.toggleState()">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

Я не хотел добавлять метод toggleState в класс hero, я хотел его в компоненте, который его вызывает. Поэтому я изменил привязку клика к

(click)="toggleState(hero)"

и просто передайте нажатого героя методу, который нам все еще нужно написать.

У heroсвойства stateпока нет, поэтому давайте добавим это в app / hero.ts :

добавить state:string = "inactive";в список свойств.

Теперь вернемся к heroes.component.ts , импортируем наши зависимости анимации, добавим метаданные анимации в @Component и создадим toggleState()метод. Мы хотим сохранить onSelect()метод, который мы удалили из html, мы изменим его и будем использовать повторно через мгновение.

Вверх, заменить

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

с участием

import { Component, OnInit, trigger, state, style, transition, animate } from '@angular/core';

Добавьте animationsметаданные после styleUrls: [ ... ],:

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

В классе HeroesComponent добавьте следующий метод:

toggleState(hero: Hero) {
  hero.state = (hero.state === 'active' ? 'inactive' : 'active');
}

Так что все работает. Теперь давайте разберемся с деталями героя. Деталь героя была немного размыта после списка, который показывает, какой герой выбран, сопровождаемый кнопкой, которая перемещается к маршруту detail /: id. Но теперь это прошло. onSelect()Метод мы отдельностоящий запускал это.

Давайте переименуем onSelect()его, updateSelectedHero()а затем назовем его изнутри toggleState():

  updateSelectedHero(hero: Hero): void {
    this.selectedHero = hero;
  }

  toggleState(hero: Hero) {
    hero.state = (hero.state === 'active' ? 'inactive' : 'active');
    this.updateSelectedHero(hero);
  }

и мы снова в деле. Появляется деталь героя, и кнопка View Details вызывает gotoDetail (). Существуют неприятные недостатки пользовательского интерфейса, которые нужно устранить, но вы поняли идею.

Мой конченный панк

Автор: Cameron Donahue Размещён: 08.11.2016 10:36
Вопросы из категории :
32x32