console.log("usersService body: "+body);
return body.data || { };
data
, соответственно ваш сервис возвращает пустой объект.console.log("appComponent.users: "+this.users);
this.usersService.getUsers()
.subscribe(
users => {
console.log(users);
this.users = users;
},
error => this.errorMessage = <any>error);
private extractData(res: Response) {
return res.json() || [];
}
"module": "es6", => "module": "commonjs",
"dependencies": {
"angular2": "^2.0.0-beta.21",
"rxjs": "^5.0.0-rc.4",
+"reflect-metadata": "0.1.2",
+"zone.js": "^0.6.11"
}
import 'reflect-metadata';
import 'zone.js';
class DropDown {
selects;
constructor(options) {
this.selects = options.selects;
this.selects.forEach((item, i, selects) => {
item.addEventListener('mousedown', this.showMenu.bind(this));
});
}
showMenu(e) {
e.preventDefault();
const currentItem = e.target;
let list = currentItem.closest('.select-wrap').querySelector('.select-list');
console.log(this.selects);
if (list.classList.contains('hide')) {
this.selects.forEach((item, i, selects) => {
item.classList.remove('active');
item.closest('.select-wrap').querySelector('.select-list').classList.add('hide');
});
list.classList.remove('hide');
currentItem.classList.add('active');
} else {
list.classList.add('hide');
currentItem.classList.remove('active');
}
}
}
let dropDown = new DropDown({
selects: document.querySelectorAll('select')
});
@Directive({ selector: 'html-outlet' })
export class HtmlOutlet {
@Input() html: string;
cmpRef: ComponentRef<any>;
constructor(private vcRef: ViewContainerRef, private compiler: Compiler) { }
ngOnChanges() {
const html = this.html;
if (!html) return;
if(this.cmpRef) {
this.cmpRef.destroy();
}
@Component({
selector: 'dynamic-comp',
template: html
})
class DynamicHtmlComponent {};
@NgModule({
imports: [CommonModule],
declarations: [DynamicHtmlComponent]
})
class DynamicHtmlModule {}
this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
.then(factory => {
const moduleRef = factory.ngModuleFactory.create(this.vcRef.parentInjector);
const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
const cmpRef = this.vcRef.createComponent(compFactory, 0, moduleRef.injector);
});
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
<html-outlet [html]="html"></html-outlet>
template
может быть templateUrl
Параметры @Input
@Output
можно накрутить потом если надоComponentFactoryResolver.resolveComponentFactory
entryComponents
массив вашего модуля или компонентаANALYZE_FOR_ENTRY_COMPONENTS
провайдерfunction MmaCarousel (id, args) {
var obj, contain, internal, controls, items; <== вот эту
@Pipe({
name: 'someRand',
pure: false
})
export class RandomPipe implements PipeTransform {
constructor(private cdRef:ChangeDetectorRef) {}
pipe: AsyncPipe;
obs: Observable<string>;
transform(value:string):any {
if (!this.pipe) {
this.pipe = new AsyncPipe(this.cdRef);
this.obs = new Observable<string>(observer=>{
observer.next('rand1');
setTimeout(()=>{
observer.next('rand@2');
}, 600)
});
}
return this.pipe.transform(this.obs);
}
}
<SearchBar onSearch={this.handleSearch.bind(this)}/>
providers: [
GlobalService,
{
provide: APP_INITIALIZER,
useFactory: (service: GlobalService) => () => service.init(),
deps: [GlobalService], multi: true
}
],
@Injectable()
export class GlobalService {
data: any;
constructor(private http: Http) { }
init(): Promise<any> {
var promise = this.http.get('src/data.json').map(res => res.json()).toPromise();
promise.then(data => this.data = data);
return promise;
}
}
export class AppComponent {
constructor(private service: GlobalService) {
console.log(service.data);
}
}
aImg.attr('src', e.target.result)
.one("load", draw).each(function() {
if(this.complete) $(this).load();
});