Exploring how to traverse a <router-outlet> within its container

Question

Exploring how to traverse a <router-outlet> within its container

I am attempting to switch the active component within a from its parent. After observing how Ionic achieves this, I believe it should resemble the following (simplified):

@Component({
    template: '<router-outlet></router-outlet>'
})
export class MyComponent {
    @ViewChild(RouterOutlet) router: RouterOutlet;

    foo() {
        this.router.navigate('/route');
    }
}

It is evident that this approach will not function correctly. Is there an alternative method to accomplish something similar?

Appreciate your assistance in advance!

angular typescript angular2-routing router-outlet

Answer 1

Answer №1

It is advisable to inject Router in the component's constructor instead of using

@ViewChild(RouterOutlet) router: RouterOutlet;

. Modify your component code as shown below:

@Component({
    template: '<router-outlet></router-outlet>'
})

export class MyComponent {
    constructor(router: Router) {}

    foo() {
        this.router.navigateByUrl('/route');
    }
}

Ensure that you have included both RouterModule and the list of your URLs in your app module for proper functionality.

Answer 2

It is advisable to inject Router in the component's constructor instead of using

@ViewChild(RouterOutlet) router: RouterOutlet;

. Modify your component code as shown below:

@Component({
    template: '<router-outlet></router-outlet>'
})

export class MyComponent {
    constructor(router: Router) {}

    foo() {
        this.router.navigateByUrl('/route');
    }
}

Ensure that you have included both RouterModule and the list of your URLs in your app module for proper functionality.

Exploring how to traverse a <router-outlet> within its container

Answer №1

Similar questions

Update a BehaviourSubject's value using an Observable

Improve the way you manage the active selection of a button

Looping through an array of nested objects using Vue

We were unable to identify any Next.js version in your project. Please ensure that the `"next"` package is installed in either the "dependencies" or "devDependencies" section

What is the best way to incorporate dynamic infographics into an ionic app?

Issue: Unhandled promise rejection: SecurityError: To use screen.orientation.lock(), the page must be in fullscreen mode

Error: Unable to locate sportsRecord due to missing function

Navigating the correct way to filter JSON data using HttpClient in Angular 4

An issue occurred: the channel has been terminated within the ChildProcess.target.send function at internal/child_process.js, line 562, character

Angular Universal involves making two HTTP calls

Best practices for implementing "Event Sourcing" in the NestJS CQRS recipe

Using Axios and Typescript to filter an array object and return only the specified properties

What is the best way to reset a setInterval ID in Angular?

Is it possible to loop through each row in a table using Cypress and execute the same actions on every iteration?

If a generic string argument is not specified as a string literal, it will not be narrowed unless it is the first argument

Tips on retrieving unique data with id in Angular 6

Tips for removing the notification that the .ts file is included in the TypeScript compilation but not actively used

Determining the typing of a function based on a specific type condition

Inferring types from synchronous versus asynchronous parameters

Exciting Update: Next.js V13 revalidate not triggering post router.push