typescript - Angular 10 Auxiliary Route not being found when routing to child

Question

I've tried setting up my routes as follows:

app-routing.module.ts:

const platform: Route = {
    path: '',
    pathMatch: 'full',
    children: [
        {
            path: 'poll-settings',
            component: DialogComponent,
            outlet: 'dialog',
            data: {
                content: PollSettingsComponent
            }
        }
    ],
};

const routes: Routes = [platform];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

The router outlet is defined in a component called nav-bar.component.ts and the routing is triggered on the button onSettingsClick() event binding:

<div class="nav-wrapper">
    <div class="settings-wrapper">
        <button class="settings-button" (click)="onSettingsClick()">
            <mat-icon color="primary" class="settings-icon" svgIcon="gear" inline="true" aria-hidden="false">
            </mat-icon>
        </button>
    </div>
    <div class="title-wrapper">
        <div class="title">Stream Polls</div>
    </div>
    <div class="connect-wrapper">
        <div class="connect">Connect</div>
    </div>
</div>
<router-outlet name="dialog"></router-outlet>

The routing is done inside the component:

@Component({
    selector: 'app-nav-bar',
    templateUrl: './nav-bar.component.html',
    styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute
    ) { }

    ngOnInit(): void {
    }

    public onSettingsClick() {
        this.router.navigate([{ outlets: { dialog: ['.', 'poll-settings'] } }],
            {
                relativeTo: this.activatedRoute
            }
        );
    }
}

This results in a console error saying that the route is not defined. The problem is that it's not looking at the route being routed to as an auxiliary route:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: './poll-settings'
Error: Cannot match any routes. URL Segment: './poll-settings'
    at ApplyRedirects.noMatchError (router.js:2474)
    at CatchSubscriber.selector (router.js:2458)
    at CatchSubscriber.error (catchError.js:27)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28269)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

The routing doesn't work with the ['.', 'poll-settings'] or just ['poll-settings'] inside the router.navigate() call. It should result in a dialog popping up when the routing is complete.

Any help would be greatly appreciated.

Answer 1

等待大神解答