[英]Change component's template Angular 2
I'm using mdl-select component. 我正在使用mdl-select组件。 It's a drop-down list.
这是一个下拉列表。 When you press it there are
focusin
event fired. 当您按下它时,会
focusin
事件。 But it doesn't when you press an arrow-dropdown icon, so I needed to change a template a bit to have a desired behavior. 但是当您按下箭头下拉图标时却没有,因此我需要稍微更改模板以实现所需的行为。 But it's a library component.
但这是一个库组件。 Is there a way to override it's template?
有没有办法覆盖它的模板?
The thing I need to change just to add tabindex=\\"-1\\"
to element. 我需要更改的只是将
tabindex=\\"-1\\"
到元素。 I can do it with js, but I use component a lot in app, and I don't want to use document.getElement...
every time I use MdlSelectComponent
in the views of my own components. 我可以用js来做到这一点,但是我在应用程序中使用了很多组件,并且我不想每次在自己的组件视图中使用
MdlSelectComponent
都使用document.getElement...
I tried to use @Component
decorator function on MdlSelectComponent
type, however it requires to declare this class once again and anyway have done nothing. 我尝试在
MdlSelectComponent
类型上使用@Component
装饰器函数,但是它需要再次声明该类,并且无论如何都无济于事。
main.browser.ts 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() {
}
}
As @angular2-mdl-ext/select
uses Reflect
to define decorators then you do the following 由于
@angular2-mdl-ext/select
使用Reflect
定义装饰器,因此您需要执行以下操作
declare let Reflect: any;
Reflect.getOwnMetadata('annotations', MdlSelectComponent)[0].template = 'Hooray';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.