Изменить шаблон компонента Angular 2

Я использую компонент mdl-select. Это выпадающий список. Когда вы нажимаете это есть focusin Событие сработало. Но это не так, когда вы нажимаете значок со стрелкой вниз, поэтому мне нужно было немного изменить шаблон, чтобы иметь желаемое поведение. Но это компонент библиотеки. Есть ли способ переопределить его шаблон?

То, что мне нужно изменить, просто чтобы добавить tabindex=\"-1\" к элементу. Я могу сделать это с помощью JS, но я часто использую компонент в приложении, и я не хочу использовать document.getElement... каждый раз, когда я использую MdlSelectComponent в представлениях моих собственных компонентов.

Я пытался использовать @Component функция декоратора включена MdlSelectComponent типа, однако он требует объявить этот класс еще раз и в любом случае ничего не сделал.

Обновить

main.browser.ts

/*
 * Angular bootstraping
 */
import { Component } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from './app/environment';
import { bootloader } from '@angularclass/hmr';

import {MdlSelectComponent} from '@angular2-mdl-ext/select';
/*
 * App Module
 * our top level module that holds all of our components
 */
import { AppModule } from './app';

/*
 * Bootstrap our Angular app with a top level NgModule
 */
export function main(): Promise<any> {
  console.log(MdlSelectComponent)
  MdlSelectComponent.decorator.template = "<div class=\"mdl-textfield is-upgraded\" [class.is-focused]=\"this.popoverComponent.isVisible || this.focused\" [class.is-disabled]=\"this.disabled\" [class.is-dirty]=\"isDirty()\"> <span [attr.tabindex]=\"!this.disabled ? 0 : null\" (focus)=\"open($event);addFocus();\" (blur)=\"removeFocus()\"> <!-- don't want click to also trigger focus --> </span> <input #selectInput tabindex=\"-1\" [readonly]=\"!autocomplete\" class=\"mdl-textfield__input\" (click)=\"toggle($event)\" (keyup)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [placeholder]=\"placeholder ? placeholder : ''\" [attr.id]=\"textfieldId\" [value]=\"text\"> <span class=\"mdl-select__toggle material-icons\" (click)=\"toggle($event)\"> keyboard_arrow_down </span> <label class=\"mdl-textfield__label\" [attr.for]=\"textfieldId\">{{ label }}</label> <span class=\"mdl-textfield__error\"></span> <mdl-popover [class.mdl-popover--above]=\"autocomplete\" hide-on-click=\"!multiple\" [style.width.%]=\"100\"> <div class=\"mdl-list mdl-shadow--6dp\"> <ng-content></ng-content> </div> </mdl-popover> </div> ";

  return platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(decorateModuleRef)
    .catch((err) => console.error(err));
}

// needed for hmr
// in prod this is replace for document ready
bootloader(main);

APP.COMPONENT.TS

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
require('../../../styles/styles.scss');
import {MdlSelectComponent} from '@angular2-mdl-ext/select';
//
declare let Reflect: any;
Reflect.getOwnMetadata('annotations', MdlSelectComponent)[0].template = 'Hooray';
@Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    styleUrls: [],
    template: `
        <div>
            <mdl-select [(ngModel)]="personId">
                <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>
            </mdl-select>
            <router-outlet></router-outlet>
        </div>`
})
export class AppComponent implements OnInit {
    constructor(
        router: Router,
    ) {
        router.events.subscribe(data => {
            scrollTo(0, 0);
        });
    }

    public ngOnInit() {
    }
}
Источник

1 ответ

Решение

Как @angular2-mdl-ext/select использования Reflect чтобы определить декораторы, то вы делаете следующее

declare let Reflect: any;
Reflect.getOwnMetadata('annotations', MdlSelectComponent)[0].template = 'Hooray';

Пример плунжера

Источник
Другие вопросы по тегам