我已经在CustomHttp 中读取了Access EventEmitter Service等问题,其中用户在其服务中使用了EventEmitter,但是他在本评论中建议他 不要使用它,而是直接在他的服务中使用Observables.
我还阅读了这个 问题 ,解决方案建议将EventEmitter传递给子节点并订阅它.
我的问题是:我应该,还是不应该手动订阅EventEmitter?我该怎么用?
无论如何使用router.navigate将数据作为参数发送?我的意思是,像这个例子,你可以看到路由有一个数据参数,但这样做它不起作用:
this.router.navigate(["heroes"], {some-data: "othrData"})
Run Code Online (Sandbox Code Playgroud)
因为某些数据不是有效参数.我怎样才能做到这一点?我不想用queryParams发送参数.
我正在尝试使用此技术拦截输入属性更改与setter将一些数据从父组件传递到子组件,并在更改值时调用子组件中的方法.我的问题是<router-link>,当我尝试使用以下方法传递数据时,子组件被绑定到父组件:
parent_component.html:
<router-outlet [some_value] = "some_value"></router-outlet>
Run Code Online (Sandbox Code Playgroud)
其中some_value是我试图从父传递到子传递的参数.
parent_component.ts:
public some_value: string;
Run Code Online (Sandbox Code Playgroud)
和
parent_component.ts:
@Input()
public set some_vale(number : string){
this._some_value = number;
}
Run Code Online (Sandbox Code Playgroud)
但是我得到了错误
未处理的Promise拒绝:模板解析错误:无法绑定到'some_value',因为它不是'router-outlet'的已知属性.
我究竟做错了什么?使用a时,将数据从父组件传递到子组件的正确方法是<router-outlet>什么?
在此先感谢,任何帮助表示赞赏.
继续这个问题Angular 4 ^:如何让一个组件的多个子组件与每个子组件定位其自己的路由器插座,我可以将一些子组件注入多个父组件,现在我想从那些组件中传递数据父母,异步,对孩子.试过@Input,似乎无法获胜.
儿童
export class UserheaderComponent implements OnInit, AfterViewInit, OnChanges {
loading;
@Input() data;
user = {
name: '______________',
icon: '',
username: '_________',
uid: '________'
};
constructor(private router: Router) {
}
goToUser(uid) {
this.router.navigate(['user'], { queryParams: { uid: uid } });
}
ngOnInit() {
this.user = this.data;
console.log(this.data);
}
ngAfterViewInit() {
console.log(this.data);
}
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
Run Code Online (Sandbox Code Playgroud)
家长Html
<router-outlet name='userprofile-userhead' [data]="currentUser"></router-outlet>
Run Code Online (Sandbox Code Playgroud)
家长TS
export class UserprofileComponent {
public currentUser;
constructor(
private userFactory: UserFactory,
private router: Router, …Run Code Online (Sandbox Code Playgroud) 是的,所以我有一个包含以下模板的标题组件(navbar):
<ng-template [ngIf] = "authService.isAuthenticated()">
<li>
<a routerLink="Landing" class="navbar-brand" (click)="Logout()"><span class="xvrfont">Logout</span><i class="fa fa-sign-in" aria-hidden="true"></i></a>
</li>
<li>
<a routerLink="Profile" class="navbar-brand"><span class="xvrfont">{{authService.getUsername()}}</span><i class="fa fa-user-circle" aria-hidden="true"></i></a>
</li>
</ng-template>
Run Code Online (Sandbox Code Playgroud)
当用户通过身份验证时,导航的这一部分应该是可见的.找出它通过authService检查.
要检查用户是否已通过身份验证,将在每次路由更改时运行以下代码:
checkAuthenticated(){
if (localStorage.getItem('token') != null){ this.authenticated = true; }
else { this.authenticated = false; }
console.log(this.authenticated); // for Debugging.
}
Run Code Online (Sandbox Code Playgroud)
NgIf语句调用此方法:
public isAuthenticated(){
return this.authenticated;
}
Run Code Online (Sandbox Code Playgroud)
根据日志,"证实" 的真假之间切换正确,但Ngif不响应的变化不知何故.
标头component.ts看起来像这样:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {AuthService} from "../auth/auth.service";
@Component({
selector: 'app-header',
providers: [AuthService],
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
encapsulation: ViewEncapsulation.None …Run Code Online (Sandbox Code Playgroud)