我试图在Angular中实现类似委托模式的东西.当用户点击a时nav-item,我想调用一个函数然后发出一个事件,而该事件又由一些其他组件监听事件来处理.
这是场景:我有一个Navigation组件:
import {Component, Output, EventEmitter} from 'angular2/core';
@Component({
// other properties left out for brevity
events : ['navchange'],
template:`
<div class="nav-item" (click)="selectedNavItem(1)"></div>
`
})
export class Navigation {
@Output() navchange: EventEmitter<number> = new EventEmitter();
selectedNavItem(item: number) {
console.log('selected nav item ' + item);
this.navchange.emit(item)
}
}
这是观察组件:
export class ObservingComponent {
// How do I observe the event ?
// <----------Observe/Register Event ?-------->
public selectedNavItem(item: number) {
console.log('item index changed!');
}
}
关键问题是,如何让观察组件观察相关事件？
event-delegation observable observer-pattern eventemitter angular
我正在查看TypeScript代码,并注意到他们使用:
interface Blablabla {
field: Object;
}
使用Objectvs有什么好处any,如:
interface Blablabla {
field: any;
}
我知道如何将服务注入组件(通过@Component),但是如何使用DI来传递组件之外的服务？
换句话说,我不想这样做:
export class MyFirstSvc {
}
export class MySecondSvc {
constructor() {
this.helpfulService = new MyFirstSvc();
}
}
export class MyThirdSvc {
constructor() {
this.helpfulService = new MyFirstSvc();
}
}
仅限Angular 2问题:
什么是存储全局变量(如身份验证令牌或基本URL)(环境设置)的最佳方法,以便所有类都可以访问它们而不会在刷新时丢失它们？
因此,当我登录时,我将为用户提供一个身份验证令牌,并且通常将其存储在$ rootscope中以获得角度1.x.
/app
- app.component.ts
- app.component.html (hide/show: menu bar)
- app.global.service.ts (Public varible LoginSuccess:boolean)
- main.ts
/student
- student.ts
- student.service.ts
- student.component.ts
- student.component.html
/security
- login.component.ts (LoginSuccess = true)
- login.component.html
在我的Angular2应用程序中,我有一个简单的需求,我想根据登录成功显示隐藏菜单栏.为此,我创建了一个只有LoginSuccess布尔[hidden]=LoginSuccess变量的服务,我将在登录组件上设置它,并将在app.component.html上用于nav标签.
我现在面临的问题是,即使注射后app.global.service.ts通constructor的app.component.ts & login.component.ts价值不是持久的,并且每个构造函数创建的新对象app.global.service.ts.
问题:如何通过服务在应用程序中保持单个值.在Angular2文档的某个地方,我确实读到了Injectable服务是单例.
我正在尝试实现我在Stack Overflow中找到的解决方案,但面临困难.我有一个服务和一个组件,并且在实现上有些不正确.
错误:TypeError:无法读取undefined属性'next'可能有什么错误或缺失？有什么更多的缺失？同样在我的终端窗口,我收到此错误,但它没有反映在我的浏览器控制台上:错误TS1005:'=>'预期.
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
@Injectable()
export class GlobalService {
data: any;
dataChange: Observable<any>;
constructor() {
this.dataChange = new Observable((observer:Observer) { // this is the TS1005 error.
this.dataChangeObserver = observer;
});
}
setData(data:any) {
this.data = data;
this.dataChangeObserver.next(this.data); //Line of the critical error (next)
}
}
这是消耗服务的组件....(我只会放置相关的行)
import {GlobalService} from "../../../global.service";
import(...)
@Component({
providers: [GlobalService],
template: `<p>{{myData}}<>/p><span (click)="addTag(1, 'test')">Add more</span>`
});
export class MyComponent {
addTag (id,desc){
this._global.setData({ attr: 'some …我正在使用Google Maps API v3，并且在我的地图上有一些多边形。我试图添加一个事件，单击将其全部删除，并在该事件的回调函数中调用另一个函数，但我不断收到TypeError：无法读取第64行上未定义的属性“ length”（即在事件侦听器及其告诉中我没有定义Polys数组）。另外，如果我尝试在侦听器中添加一个函数，它将无法识别它，我认为它与范围问题有关，但我不知道如何解决它。我在这里先向您的帮助表示感谢。
export class InicioComponent implements OnInit, AfterViewInit {
locaciones: Locacion[] = [];
regiones: Region[];
polys: any[] = [];
constructor(private locacionService: LocacionService, private router: Router) { }
getLocaciones(): void {
this.locacionService.getLocaciones().then(locaciones => this.locaciones = locaciones);
}
public loadLocaciones(router: Router) {
for (let i = 0; i < this.locaciones.length; i++) {
const marker = new google.maps.Marker({
position: new google.maps.LatLng(this.locaciones[i].latitud, this.locaciones[i].longitud),
map: map,
label: {
color: 'black',
fontWeight: 'bold',
text: this.locaciones[i].nombre,
},
idLocacion: this.locaciones[i].id
});
google.maps.event.addListener(marker, 'click',() => { …我想创建一个指令,我可以使用模板变量,这样我就可以访问全局变量,类似于$rootScopeAngular.JS,而不必在我需要变量的每个组件中注入服务.
例如:
@Directive({
selector: '[app]',
exportAs: 'app'
})
export class AppDirective {
isLoggedIn: boolean = false;
constructor() {
// Do some stuff to set 'this.ready'...
}
}
我希望能够在我的模板中使用上面的代码,如下所示:
<div #app>
<div *ngIf="app.isLoggedIn">...</div>
</div>
这样的事情可能吗？