How to add multiple components to a path

up vote
0
down vote

favorite

@NgModule({

  declarations: [

    AppComponent,

    navBarComponent,

    searchBarComponent



  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot([

      {path: 'home', component: navBarComponent},

      {path: 'events', component: navBarComponent},

      {path: 'profile', component: navBarComponent},

      {path: 'organizations', component: navBarComponent},

      {path: '', redirectTo: 'home', pathMatch: 'full'}

    ])

  ],

I was wondering if there is a simple way to add more than one component to a path. As you can see, I have added a navBarComponent to each of the pages, but I also want to add the searchBarComponent to the homepage as well. I tried separating them by commas and passing it as an array but both methods failed. Please let me know if I'm missing something or if there is an easier way around this.

edited Nov 9 at 0:10

R. Richards

13.3k73441

asked Nov 9 at 0:01

Jonathan

If the navbar component should be displayed in every page, you it should be used directly in the template of your root (app) component. A route can only have one component. But of course that component can use as many components it needs to in its template. angular.io/guide/router
– JB Nizet
Nov 9 at 0:05

add a comment |

up vote
0
down vote

favorite

@NgModule({

  declarations: [

    AppComponent,

    navBarComponent,

    searchBarComponent



  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot([

      {path: 'home', component: navBarComponent},

      {path: 'events', component: navBarComponent},

      {path: 'profile', component: navBarComponent},

      {path: 'organizations', component: navBarComponent},

      {path: '', redirectTo: 'home', pathMatch: 'full'}

    ])

  ],

edited Nov 9 at 0:10

R. Richards

13.3k73441

asked Nov 9 at 0:01

Jonathan

If the navbar component should be displayed in every page, you it should be used directly in the template of your root (app) component. A route can only have one component. But of course that component can use as many components it needs to in its template. angular.io/guide/router
– JB Nizet
Nov 9 at 0:05

add a comment |

up vote
0
down vote

favorite

@NgModule({

  declarations: [

    AppComponent,

    navBarComponent,

    searchBarComponent



  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot([

      {path: 'home', component: navBarComponent},

      {path: 'events', component: navBarComponent},

      {path: 'profile', component: navBarComponent},

      {path: 'organizations', component: navBarComponent},

      {path: '', redirectTo: 'home', pathMatch: 'full'}

    ])

  ],

edited Nov 9 at 0:10

R. Richards

13.3k73441

asked Nov 9 at 0:01

Jonathan

@NgModule({

  declarations: [

    AppComponent,

    navBarComponent,

    searchBarComponent



  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot([

      {path: 'home', component: navBarComponent},

      {path: 'events', component: navBarComponent},

      {path: 'profile', component: navBarComponent},

      {path: 'organizations', component: navBarComponent},

      {path: '', redirectTo: 'home', pathMatch: 'full'}

    ])

  ],

angular

edited Nov 9 at 0:10

R. Richards

13.3k73441

asked Nov 9 at 0:01

Jonathan

edited Nov 9 at 0:10

R. Richards

13.3k73441

asked Nov 9 at 0:01

Jonathan

edited Nov 9 at 0:10

R. Richards

13.3k73441

edited Nov 9 at 0:10

R. Richards

13.3k73441

edited Nov 9 at 0:10

R. Richards

13.3k73441

asked Nov 9 at 0:01

Jonathan

asked Nov 9 at 0:01

Jonathan

asked Nov 9 at 0:01

Jonathan

If the navbar component should be displayed in every page, you it should be used directly in the template of your root (app) component. A route can only have one component. But of course that component can use as many components it needs to in its template. angular.io/guide/router
– JB Nizet
Nov 9 at 0:05

add a comment |

If the navbar component should be displayed in every page, you it should be used directly in the template of your root (app) component. A route can only have one component. But of course that component can use as many components it needs to in its template. angular.io/guide/router
– JB Nizet
Nov 9 at 0:05

If the navbar component should be displayed in every page, you it should be used directly in the template of your root (app) component. A route can only have one component. But of course that component can use as many components it needs to in its template. angular.io/guide/router
– JB Nizet
Nov 9 at 0:05

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

I think it is better to add the common to root component only if you will use that component in every page rather than adding it on each component.

answered Nov 9 at 0:14

Mohamed Mohamed

192

add a comment |

up vote
0
down vote

You can set path variable for your same component and different routes:

{path: '#your_scope/:route_name', component: navBarComponent}

and every /#your_scope/what_the_fuck will route to the navBarComponent.

but by the way. you better just use the navBarComponent in your root component as a template.

answered Nov 9 at 2:05

junk

211316

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53217945%2fhow-to-add-multiple-components-to-a-path%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

I think it is better to add the common to root component only if you will use that component in every page rather than adding it on each component.

answered Nov 9 at 0:14

Mohamed Mohamed

192

add a comment |

up vote
0
down vote

accepted

I think it is better to add the common to root component only if you will use that component in every page rather than adding it on each component.

answered Nov 9 at 0:14

Mohamed Mohamed

192

add a comment |

up vote
0
down vote

accepted

I think it is better to add the common to root component only if you will use that component in every page rather than adding it on each component.

answered Nov 9 at 0:14

Mohamed Mohamed

192

I think it is better to add the common to root component only if you will use that component in every page rather than adding it on each component.

answered Nov 9 at 0:14

Mohamed Mohamed

192

answered Nov 9 at 0:14

Mohamed Mohamed

192

answered Nov 9 at 0:14

Mohamed Mohamed

192

answered Nov 9 at 0:14

Mohamed Mohamed

192

add a comment |

up vote
0
down vote

You can set path variable for your same component and different routes:

{path: '#your_scope/:route_name', component: navBarComponent}

and every /#your_scope/what_the_fuck will route to the navBarComponent.

but by the way. you better just use the navBarComponent in your root component as a template.

answered Nov 9 at 2:05

junk

211316

add a comment |

up vote
0
down vote

You can set path variable for your same component and different routes:

{path: '#your_scope/:route_name', component: navBarComponent}

and every /#your_scope/what_the_fuck will route to the navBarComponent.

but by the way. you better just use the navBarComponent in your root component as a template.

answered Nov 9 at 2:05

junk

211316

add a comment |

up vote
0
down vote

You can set path variable for your same component and different routes:

{path: '#your_scope/:route_name', component: navBarComponent}

and every /#your_scope/what_the_fuck will route to the navBarComponent.

but by the way. you better just use the navBarComponent in your root component as a template.

answered Nov 9 at 2:05

junk

211316

You can set path variable for your same component and different routes:

{path: '#your_scope/:route_name', component: navBarComponent}

and every /#your_scope/what_the_fuck will route to the navBarComponent.

but by the way. you better just use the navBarComponent in your root component as a template.

answered Nov 9 at 2:05

junk

211316

answered Nov 9 at 2:05

junk

211316

answered Nov 9 at 2:05

junk

211316

answered Nov 9 at 2:05

junk

211316

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl