Ответы пользователя по тегу Angular
  • Как реализовать ControlValueAccessor?

    @antoart
    Web developer
    Привет.
    Буду опираться на твой же код.

    Реализация данного интерфейса позволяет ангуляровской форме взаимодействовать с кастомным компонентом. В метод
    writeValue(value: any) {
       this.formControlName = value;
      }

    прокидывается то значение, которое ты передаешь в formControlName. Заметь, это не Binding, как между компонентами. Чтобы значение передалось надо сказать форме прямо и конкретно
    form.setValue({email: "email", password: 'passworddd'})
    // или 
    form.patchValue({email: "email"})


    А чтобы динамически считать значение, которое ты прокинешь через функцию this.propagateChange(val) , надо уже работать с изменением формы
    this.filterForm.valueChanges
          .pipe(
            takeUntil(this._onDestroy$)
          )
          .subscribe((val) => {
           console.log(val);
          });


    И ты пойми что же ты хочешь. Прокидывать параметры в компонент (binding) или прокидывать значение формы в компонент (ControlValueAccessor).

    p.s. напиши в своем коде, и посмотри как в консоль валятся значения формы из уже дочернего компонента.
    initForm() {
        this.SignupReactiveForm = this.fb.group({
          password: ['password', [
            Validators.required,
            Validators.pattern(/[A-z]/)
          ]
          ],
          email: ['email', [
            Validators.required, Validators.email
          ]
          ],
          
    
        });
      }
    
    }
    Ответ написан
    Комментировать
  • Какие знаете книги на русском по Angular?

    @antoart
    Web developer
    https://metanit.com/web/angular2/ - это не книга, но мне помогло в свое время.
    Ответ написан
    Комментировать
  • Стоит ли изучать angularJS питон программисту минуя нативный js?

    @antoart
    Web developer
    Все вышеописанные ответы в чем-то правы.
    А еще можно задать себе вопрос стоит ли изучать AngularJS? В чем разница между AngularJS и Angular.

    Но вообще, если речь идет об AngularJS, то без знания JS там будет трудно и непонятно. Аналогия такая: JS - это знания о том, какие слова существуют, как строить предложения, как можно вежливо послать на* гору кого-то; а фреймфворк - это просто описание того, как составить все эти вежливости, чтобы получить жанр Фантастика.

    p.s. Когда встает вопрос "или это, или то", то выбирай "и это, и то" ))
    Ответ написан
    Комментировать
  • Как сделать анимированный переход между роутами в Angular 2+?

    @antoart
    Web developer
    Если человеческим языком об общей концепции.
    Когда осуществляется роутинг, то компонент источник помирает, а компонент по роуту оживает. Для источника ты создаешь анимашку на уход, а для цели - анимашку на создание компонента.
    В любом случае будет помер - ожил.
    Ответ написан
    Комментировать
  • Как создать фильтр по таблице?

    @antoart
    Web developer
    Добавлю про сам фильтр, ибо Alex уже высказался об общей концепции.

    Если данных для таблицы много, то для фильтра отправляй каждый раз запрос на сервер.
    Если данных столько, что ты их видишь всегда сразу, то фильтруй просто в компоненте. *ngFor поможет.

    Тебе потребуется знание bananaInTheBox [(ngModel)] https://angular.io/api/forms/NgModel
    Ответ написан
    Комментировать
  • Почему возникает ошибка парсинга html?

    @antoart
    Web developer
    Привет, Николай Семенов.
    Ну ты же на самом деле хочешь ответ, как сделать, чтобы работало?)))
    Будет тебе ответ. Но вначале ответ на твой прямой вопрос - ангуляр так не умеет. Туда, в квадратные скобки, можно передать значение выражения, но не само выражение, при этом chartData[indicators] тоже прокатит. Так что так нельзя.

    Но если очень хочется то используй Pipe.
    Это. кстати, гораздо лучше, чем использовать метод, производительность лучше. Но хозяин барин.

    Итак варианты:
    1. так себе. Если ты в doCheck() посмотришь сколько раз будет вызван метод getFilteredData(), то будет долго глаз дергаться.
    <p-multiSelect [options]="getFilteredData()" [(ngModel)]="textAuxiliaryAxis"
              maxSelectedLabels=3 defaultLabel="Выберите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
            </p-multiSelect>


    2. Вариант хороший и оптимальный
    <p-multiSelect [options]="chartData[indicators] | myCoolPipe: 'main' " [(ngModel)]="textAuxiliaryAxis"
              maxSelectedLabels=3 defaultLabel="Выберите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
            </p-multiSelect>
    
    @Pipe( selector: 'myCoolPipe')
    export class MyCoolPipe implements PipeTransform {
      public transform(value: any, filter: string = ''): string {
       if (value) {
           return value.filter(v => v.axis !== filter);
       }
    }


    Pipe кэширует запросы и не запускается миллиард раз.
    Ответ написан
    Комментировать
  • Где можно найти видео-туториал по связке ангуляр и материал дизайн?

    @antoart
    Web developer
    Дима Долготер
    Отрадно видеть устремленного в высь человека :)
    1. Как заметил товарищ, ангуляр материалс - это просто набор компонентов. Скажу по опыту, хороших компонентов. Просто эдакие кубики, как , например.
    2. Для освоения ангуляра потребуется чтение официальной доки angular.io. Я в свое время начинал с https://metanit.com/web/angular2/.
    Насчет видеоуроков соглашусь немного. Тебе будет сложно найти "ИМЕННО ТОТ САМЫЙ" видеоурок. Их просто напросто очень много. Лучше начни с документации, а по мере возникновения вопросов ищи конкретно.

    p.s. таблички делать - это хорошо ))
    Ответ написан
    2 комментария
  • Как получить дочерние элементы созданные ngFor?

    @antoart
    Web developer
    Артем, есть еще один вариант. Он похож, но его можно встретить у различных создателей кучи всяких компонентов для ангуляра.
    Использование пустых директив.
    <div class="table-body">
        <ul class="table-list"
            directiveList>
          <li *ngFor="let item of items; let i = index; trackBy: trackByFn"
               class="table-item" directiveItem>
              {{item}}
          </li>
        </ul>
      </div>


    Имеется директива directiveList, имеется директива directiveItem.
    В классе directiveList находится список этих "дочерних" элементов.
    @Directive({
      selector: '[directiveList]',
      exportAs: 'directiveList'
    })
    export class DirectiveList {
    /**
       * Children directives which placed on items
       */
      @ContentChildren(DirectiveItem, {read: ElementRef}) // получаем сразу как список ссылок на компоненты класса
      private _items: QueryList<DirectiveItem>;
    }
    
    ngAfterContentInit() {
        this._items.changes.subscribe(() => {
          this.coolFunc();
        });
    
    }


    В чем отличие?
    Ты отвязываешься от работы с элементами в компоненте. Т.к. сегодня ты хочешь что-то делать со списком элементов, а завтра не хочешь, для этого ты просто уберешь директивы. Компонент практически не изменится.

    Но в любом случае через @ContentChildren.

    p.s. совсем забыл. Вот сама пустая директива

    @Directive({
      selector: '[directiveItem]'
    })
    export class ClassNewInViewItemDirective {
    
      constructor() { }
    
    }
    Ответ написан
    Комментировать
  • Angular 2+ Почему родительский компонент не видит EventEmitter .emit()?

    @antoart
    Web developer
    Слушай, классный вопрос.

    Заставил пошерстить документацию и применить дедукцию )))
    В итоге вот тебе развернутый ответ.

    1. Urukhayy дал частично правильный ответ. Ну, то есть он корректно заметил, что запись вида
    @Output() TestEvent = new EventEmitter();
    предпочтительней, чем запись вида
    @Output('eventEmitterAlias') blaBlaBla = new EventEmitter();

    Ангулярщики сами уже не рекомендуют использовать алиасы, даже tslint в нормальных проектах ругается на это и говорит, что способ когда указывается alias не очень крут, и лучше таким способом не пользоваться. Сложно будет отследить эти методы в коде, и уже точно невозможно будет в студии "провалиться" в код.
    Но ты можешь так делать, чисто технически :):)
    Да и вообще в Typescript принято писать в camelCase стиле (testEvent). PascalCase это уже больше на C# похоже.

    2. По существу.
    Из документации по ангуляр (https://angular.io/guide/bootstrapping#the-bootstr... стало ясно, что те компоненты, которые прописаны в bootstrap создаются при запуске приложения. Каждый с нуля со своей структурой дочерних компонентов.
    Что это значит для нас?
    Ты создал AppComponent, в котором создался MainComponent со всеми нужными связями (@Output). А дальше система создала отдельно MainComponent и поместила куда следует, оторванного от родителя, сиротинушку такого. Связь потеряна. В этом и было дело.

    А чтобы увидеть это - в MainComponent добавь
    constructor() {
        console.log('main component create');
    }

    И проследи, сколько раз компонент создался.

    Заключение:
    Вопрос огонь! Поработай над стилем. Никто не пишет punkt. Представь, что заказчик иностранец. (menuPoint, link, item, point) - item супер вариант ))). Почитай про style-guide ангуляр. Поможет найти общий язык с другими ангулярщиками :):)
    Ответ написан
    Комментировать
  • Angular 5 как очистить input у другого компонента?

    @antoart
    Web developer
    /** Form (ngSubmit) handler  **/ 
        submitForm() {
            if (!!this.query)
                this.router.navigate([`/${this.currentLang}/search`, this.query, 1]);
                this.query = '';
        }
    Ответ написан
    Комментировать