Question

问题是该事件在某些组件上触发，而在其他组件上不触发，例如，当我在除着陆组件之外的所有其他组件上路由时，就会触发该事件。这是下面的我的代码。

<-- Main Component -->
<div class="body-scroller">
    <app-nav></app-nav>
    <div class="body-wrapper">
        <div class="main-wrapper">
            <div class="main-content">
                <router-outlet></router-outlet>  // LandingComponent and Other Components rendered here
            </div>
            <app-footer></app-footer>
        </div>
    </div>
</div>

<-- Landing Page Component -->
    <div class="landing-page-content">
    ....
    </div
    <div class="home-content">
                <router-outlet></router-outlet>  // HomeComponent rendered here
    </div>


<-- Routing.ts -->
{
        path: 'main',
        component: MainComponent,
        children: [
            {
                path: 'landing-page',
                component: LandingPageComponent,
                children: [
                    { 
                    path: '', 
                    redirectTo: 'home',
                    pathMatch: 'full' },
                    {
                        path: '',
                        component: HomeComponent,
                    }
                ]
            },
            {
                path: 'signup',
                component: SignupComponent
            },
        ]
    },
    {
        path: 'about',
        component: MainComponent,
        children: [
            {
                path: 'about',
                component: AboutComponent,
            },
            {
                path: 'contact',
                component: ContactComponent
            },
        ]
}

是什么原因导致事件未在着陆组件上触发？

Answer 1

为什么着陆页组件上的<router-outlet></router-outlet>。

您必须使用一个路由器出口实例。

Answer 2

仅使用一个路由器插座。所有组件都呈现在一个路由器出口容器中，因此无需重复使用它。

Angular Event窗口：滚动不触发（高级布局）

2 个答案: