angularjs - Angular 2 : How to communicate from parent component to child?-6ren

angularjs - Angular 2 : How to communicate from parent component to child?

转载作者：太空狗更新时间：2023-10-29 17:36:07

25

4

我正在标签之间加载一些 div。如下所示。

这是我的 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 文本....!!!!

应用路由.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 加载侧边栏和顶部栏组件

最佳答案

我遇到了那个问题。这是我解决这种情况的方法；

按照官方 Angular 文档中的说明创建具有可观察字段的共享服务
在您的导航栏组件中，订阅来自共享服务的值以显示导航栏
在登录和注销页面中，更新值。由于你已经订阅了该值，订阅者自己处理这种情况
创建身份验证服务。添加一个类似于此的方法来询问您的后端，请求是否已通过身份验证；

//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);
            });
    }

在canActivate 或canLoad 或CanActivateChild 中创建一个身份验证守卫并调用isAuthorized 方法。
在您的回调中，处理未经授权的请求。您可以将用户重定向到错误页面或删除导航栏，以及任何您想要的。

希望对您有所帮助!

关于angularjs - Angular 2 : How to communicate from parent component to child?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40523579/

25

4

0

文章推荐： c# - 无法添加 IntPtr 和 Int

文章推荐： c# - 为什么 C# 不支持 base.base？

javascript - 如果 doc 有 child ，请删除所有 child ，如果 child 有更多 child ，请删除这些 child
我的收藏具有以下结构 { _id:1, parent_id:0 } { _id:2, parent_id:1 } { _id:3, parent_id:1 } { _id:4, par
c# - 在Unity3d中获取所有 child ， child 的 child
到目前为止，我已经尝试过获取该对象的所有子对象，但它只带来了两个子对象。不都是 child 的 child 。我如何获取所有内容并循环获取特定名称对象 Transform[] objChild = g
jquery获取 child 的 child 的 child
这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the
mysql - 需要在轨道上排列自己、 child 和 child 的 child
我有一个如下表好吧，在这个表中每个用户都有一个父用户，那么如果我们选择一个用户，那么它的 id 、子代 id 和子代子代 id 应该作为数组返回。我需要一个查询来获取 Rails 中的这些值，而不使
javascript - Jquery child>Parent>child>child 选择器
我需要以下代码的帮助: HTML: process process 在点击 td[class=process] 时，我需要 input[name=dat
php - 第一个 child 最后一个 child 和中间的 child
好的，所以我从中获得了一个 PHP，该 PHP 由依赖于手头动态情况的切换循环传播(我认为)。现在，当我添加一个复选框时，我希望能够使 div 中的第一个复选框具有顶部边框和侧面，没有底部。下面的只有
swift - Swift 中的 Sprite Kit Child of Child of Child
我正在使用 Swift 和 Sprite Kit。我有一个名为 MrNode 的 SKNode，它有多个 SKSpriteNodes 和 SKNode 子节点。一些SKNode有子节点，而这些子节点也
sql - 获取 child 关系的计数和 child 的 child 的计数
对不起，这个标题太俗了，但我真的不确定如何解释这个，我是新一代的 SQL 技能由于事件记录模式而退化的人之一! 基本上我在 PostgreSQL 中有三个表客户端(一个客户端有很多 map ) -
php - 找到没有 child 的行，如果有 child 最新的 child
我有这样的简单表格: 编号 parent_id 创建于具有父/子关系...如果一行是子行，则它有一个 parent_id，否则它的 parent_id 为 0。现在我想选择所有没有子项(因此本身)
javascript - 删除具有所述 child ID 的 child 的 child
所以我有这样的结构: 我的问题是:如何从每个主题中删除 ID 为 3Q41X2tKUMUmiDjXL1BJon70l8n2 的每个字段。我正在考虑这样的事情: admin.database().ref
html - CSS - 模糊所有的 child ，除了悬停的 child ，当鼠标悬停在 child 身上时
这个问题在这里已经有了答案: Change opacity on all elements except hovered one (1 个回答) 关闭 5 个月前。因此，当鼠标悬停在 child
德尔福快速报告 : Band order to achieve detail-child-child-child banding?
我需要在 Delphi 5 中创建一个 QuickReport，其布局如下: +================ | Report Header +================ +========
html - 如何在不提及第一个 child 的情况下在 css 中定义 child 的 child ？
假设我有这样的 html: Some more detailed code.... 我想知道如何在CSS中使用“A
html - 我怎样才能包装 flexbox child ，以便多个 child 堆叠在另一个 child 旁边？
我有一个使用 flexbox 的类似表格的布局: +--------------+---------------+-----------------+---------------+ | 1
ruby-on-rails - Rails - 同时创建 child 和 child 的 child
我有一个关联，其中 user has_many user_items 和 user_items has_many user_item_images。与一个已经退出的用户。我可以创建一个新的 user_
html - 第 n 个 child ()还是第一个 child ？如何选择第一个和第二个 child
我想选择无序列表中的前两个列表项。我可以这样选择第一项: ul li:nth-child(1) a { background: none repeat scroll 0 0 beige; }
css - 当只有一个 child 可用时，最后一个 child 样式会覆盖第一个 child 样式
ul li:first-child a { border-radius: 5px 5px 0 0; } ul li:last-child a { border-radius: 0 0 5p
html - 如何选择没有 firstChild 或 nth-child() 的 child 的 child ？
我有一个这样的表:
c++ - "child control"、 "child window"和 "child window control"之间有区别吗？
或者这些术语用于指代同一事物？我正在尝试在我的 Win32 应用程序中实现一些显示位图图像的自定义按钮。一个教程指出我应该使用 CreateWindow() 创建子窗口。但是，我已经从另一个关于创
javascript - div parent 和两个 child ，在其他 child 中获取一个 child 的id
我想在 jquery 中获取我的 svg 的 id，我尝试了这个 jquery，但它是未定义的。 $(event.target).children('svg').attr("id") Target.e

首页

博学

6Ren·AI

商城

angularjs - Angular 2 : How to communicate from parent component to child?