Angular2: Как связаться с родительским компонентом с дочерним?

Я загружаю некоторые из div между тегом. Его как рев.Angular2: Как связаться с родительским компонентом с дочерним?

Вот мой index.html

<html> 
<script> 
System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 

<!-- 3. Display the application --> 

<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

app.module.ts

@NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    AppRoutingModule 
], 
declarations: [ 
    AppComponent, 
    LoginComponent, 
    HomeComponent, 
    NewsfeedComponent, 
    TopBarComponent, 
    SideMenuComponent 
], 
providers : [ 
    AuthGaurd 
], 
bootstrap: [ 
    AppComponent 
] }) 
export class AppComponent {}

home.component.ts

@Component({ 
    selector: 'home', 
    moduleId: module.id, 
    templateUrl: 'home.component.html', 
    providers : [ 
     LoginService 
    ] 
}) 

export class HomeComponent implements OnInit{ 
isLoggedin : boolean; 
constructor (private loginService : LoginService) { } 
ngOnInit(): void { 
    this.loginService.getLogged().subscribe((isLoggedIn: boolean) => { 
     this.isLoggedin = isLoggedIn; 
    }); } 
} 

home.component.html 

<side-menu *ngIf='isLoggedin'></side-menu> 
<top-bar *ngIf='isLoggedin'></top-bar> 
<router-outlet></router-outlet>

auth.gaurd.ts

@Injectable() 
export class AuthGaurd implements CanActivate{ 
    constructor(private router : Router) { 
    } 
    canActivate(){ 
     if (localStorage.getItem('isLogin')){ 
      return true; 
     } 
     this.router.navigate(['/login']) 
     return false; 
    } 
}

login.service.ts

@Injectable() 
export class LoginService { 
    private subject: Subject<boolean> = new Subject<boolean>(); 
    constructor(private router : Router) { 
    } 
    login(){ 
     this.setLogged(true); 
     localStorage.setItem("isLogin","true"); 
     this.router.navigate(['/news-feed']); 
    } 
    logout(){ 
     this.setLogged(false); 
     localStorage.removeItem("isLogin"); 
     this.router.navigate(['/login']); 
    } 
    getLogged(): Observable<boolean> { 
     return this.subject.asObservable(); 
    } 
    setLogged(val : boolean): void { 
     this.subject.next(val); 
    } 
}

login.component.ts

@Component({ 
    selector: 'login', 
    moduleId: module.id, 
    templateUrl: 'login.component.html' 
}) 

export class LoginComponent { 
    constructor (private loginService : LoginService) { 
    } 

    login(){ 
     this.loginService.login() 
    } 
}

login.component.html

<input type="number” #mobileNumber /> 
<input type="password" #password /> 
<input type="button" (click)="login()">

newsfeed.component.ts

@Component({ 
    selector: 'newsfeed', 
    moduleId: module.id, 
    templateUrl: 'newsfeed.component.html', 
}) 

export class NewsfeedComponent { 

}

newsfeed.component.html

некоторые HTML текст .... !!!!

приложение-routing.module.ts

@NgModule({ 
imports: [ 
    RouterModule.forRoot([ 
     { 
      path : 'login', 
      component : LoginComponent 
     }, 
     { 
      path : 'news-feed', 
      component : NewsfeedComponent, 
      canActivate : [AuthGaurd] 
     }, 
     { 
      path : '', 
      redirectTo : '/news-feed', 
      pathMatch : 'full' 
     } 
     { 
      path: '**', 
      component: LoginComponent 
     } 
    ]) 
], 
exports: [ 
    RouterModule 
] 
}) 
export class AppRoutingModule {}

На самом деле он работает нормально, когда я иду с щелчками. как его запуск идеально, чем при нажатии кнопки входа в систему, он пересылает новости и показывает ожидаемый результат. но когда я перехожу из URL-адреса браузера, его не загружая боковую панель и компонент верхнего бара из home.html

источник

2016-11-10 Pinank Lakhani

Вы должны использовать общую службу для взаимодействия с компонентами, добавленными маршрутизатором https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

Я пробовал с этим. Он работает нормально для кликов, но не работает, когда я просматриваю URL-адрес браузера. –

Вам необходимо предоставить дополнительную информацию. Я понятия не имею, что вы пытаетесь выполнить, и что вы пытаетесь или где может быть проблема. –

Я не уверен, если это фиксирует все, но я думаю, что вы хотите прочитать значение из LocalStorage первым, чтобы получить недавно сохраненные и при использовании BehaviorSubject слушателей также получить последний статус, если this.subject.emit() был вызван перед тем, как абонентом был подписавшийся.

@Injectable() 
export class LoginService { 
    //private subject: Subject<boolean> = new Subject<boolean>(false); 
    private subject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(); // <<< changed 
    constructor(private router : Router) { 
     this.sublect.next(logalStorage.getItem('isLogin')); // <<< added 
    } 
    login(){ 
     this.setLogged(true); 
     localStorage.setItem("isLogin","true"); 
     this.router.navigate(['/news-feed']); 
    } 
    logout(){ 
     this.setLogged(false); 
     localStorage.removeItem("isLogin"); 
     this.router.navigate(['/login']); 
    } 
    getLogged(): Observable<boolean> { 
     return this.subject.asObservable(); 
    } 
    setLogged(val : boolean): void { 
     this.subject.next(val); 
    } 
}

источник

2016-11-10 10:44:40

Его выдающая ошибка времени выполнения из-за следующей строки частный предмет: BehaviorSubject = new BehaviorSubject (); // <<< changed Поставляемые параметры не соответствуют какой-либо сигнатуре целевого вызова. –

Тогда, вероятно, должно быть 'new BehaviorSubject (false);' –

Выше один удаляет ошибку времени выполнения, но не дает ожидаемого результата. –

Я столкнулся с этой проблемой. Вот как я решаю эту ситуацию;

Создать общую службу с наблюдаемыми полями, как описано в официальных угловых документах
В компоненте панели навигации подписаться на значение от общего сервиса для отображения панели навигации
В входа и выхода страниц, значение обновления. Поскольку вы уже подписали значение, абонент обрабатывает эту ситуацию сам по себе
Создайте службу проверки подлинности. Добавьте метод, аналогичный этому, чтобы спросить ваш сервер, запрос аутентифицирован;

//method parameters depend on what you want 
isAuthorized(url: string, errorCallback: (any) => void) { 
     let body = JSON.stringify(url) 
     return this.http.post('account/isauthorized', body) 
      .map((response: Response) => { 
       //update value to display navigation bar if user is authenticated 
       yourSharedService.observableField.next(true); 
       return true; 
      }) 
      .catch((response: Response) => { 
       errorCallback(response.status); 
       return Observable.of(false); 
      }); 
    }

Создание караул аутентификации и вызвать метод isAuthorized в canActivate или canLoad или CanActivateChild.
В своем обратном вызове обрабатывайте несанкционированные запросы. Вы можете перенаправить пользователя на страницы ошибок или удалить панель навигации и все, что захотите.

Надеюсь, это поможет!

источник

2016-11-10 09:42:36 ulubeyn

. Не работает –

Если вы создадите плункер с тем, что вы уже пробовали в соответствии с моим ответом, я могу внести изменения и помочь лучше. – ulubeyn

Angular2: Как связаться с родительским компонентом с дочерним?

ответ

Смежные вопросы