Mixing
Refresh all component routings
I wanted to make a angular 7 website responsive. I have two very different layouts and instead of hiding all of this unnecessary HTML with CSS Media Queries I created two components corresponding to a larger desktop version and a version for mobile phones and smaller displays. So I made two different routings:
const dekstop: Routes = [
{
path: '',
component: HomePageComponent
},
...
];
const mobile: Routes = [
{
path: '',
component: MobileHomePageComponent
},
...
];
Currently I change them on load and a resize event:
@NgModule({
imports: [RouterModule.forRoot(dekstop)],
exports: [RouterModule]
})
export class AppRoutingModule {
mobileConfigured = false;
public constructor(private router: Router,
private device: DeviceService) {
if (device.isMobile()) {
router.resetConfig(mobile);
this.mobileConfigured = true;
}
window.onresize = () => {
if (this.mobileConfigured && !this.device.isMobile()) {
window.location.reload();
return;
}
if (this.device.isMobile() && !this.mobileConfigured) {
window.location.reload();
}
};
}
}
But this method is inefficient because it reloads the page when the components change. Is there a way I can reload them without reloading the whole page?
angular angular-routing angular-components angular-component-router edited Jan 12 at 15:05
marc_s
581k13011211268
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
add a comment |
I wanted to make a angular 7 website responsive. I have two very different layouts and instead of hiding all of this unnecessary HTML with CSS Media Queries I created two components corresponding to a larger desktop version and a version for mobile phones and smaller displays. So I made two different routings:
const dekstop: Routes = [
{
path: '',
component: HomePageComponent
},
...
];
const mobile: Routes = [
{
path: '',
component: MobileHomePageComponent
},
...
];
Currently I change them on load and a resize event:
@NgModule({
imports: [RouterModule.forRoot(dekstop)],
exports: [RouterModule]
})
export class AppRoutingModule {
mobileConfigured = false;
public constructor(private router: Router,
private device: DeviceService) {
if (device.isMobile()) {
router.resetConfig(mobile);
this.mobileConfigured = true;
}
window.onresize = () => {
if (this.mobileConfigured && !this.device.isMobile()) {
window.location.reload();
return;
}
if (this.device.isMobile() && !this.mobileConfigured) {
window.location.reload();
}
};
}
}
But this method is inefficient because it reloads the page when the components change. Is there a way I can reload them without reloading the whole page?
angular angular-routing angular-components angular-component-router edited Jan 12 at 15:05
marc_s
581k13011211268
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
add a comment |
I wanted to make a angular 7 website responsive. I have two very different layouts and instead of hiding all of this unnecessary HTML with CSS Media Queries I created two components corresponding to a larger desktop version and a version for mobile phones and smaller displays. So I made two different routings:
const dekstop: Routes = [
{
path: '',
component: HomePageComponent
},
...
];
const mobile: Routes = [
{
path: '',
component: MobileHomePageComponent
},
...
];
Currently I change them on load and a resize event:
@NgModule({
imports: [RouterModule.forRoot(dekstop)],
exports: [RouterModule]
})
export class AppRoutingModule {
mobileConfigured = false;
public constructor(private router: Router,
private device: DeviceService) {
if (device.isMobile()) {
router.resetConfig(mobile);
this.mobileConfigured = true;
}
window.onresize = () => {
if (this.mobileConfigured && !this.device.isMobile()) {
window.location.reload();
return;
}
if (this.device.isMobile() && !this.mobileConfigured) {
window.location.reload();
}
};
}
}
But this method is inefficient because it reloads the page when the components change. Is there a way I can reload them without reloading the whole page?
angular angular-routing angular-components angular-component-router edited Jan 12 at 15:05
marc_s
581k13011211268
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
I wanted to make a angular 7 website responsive. I have two very different layouts and instead of hiding all of this unnecessary HTML with CSS Media Queries I created two components corresponding to a larger desktop version and a version for mobile phones and smaller displays. So I made two different routings:
const dekstop: Routes = [
{
path: '',
component: HomePageComponent
},
...
];
const mobile: Routes = [
{
path: '',
component: MobileHomePageComponent
},
...
];
Currently I change them on load and a resize event:
@NgModule({
imports: [RouterModule.forRoot(dekstop)],
exports: [RouterModule]
})
export class AppRoutingModule {
mobileConfigured = false;
public constructor(private router: Router,
private device: DeviceService) {
if (device.isMobile()) {
router.resetConfig(mobile);
this.mobileConfigured = true;
}
window.onresize = () => {
if (this.mobileConfigured && !this.device.isMobile()) {
window.location.reload();
return;
}
if (this.device.isMobile() && !this.mobileConfigured) {
window.location.reload();
}
};
}
}
But this method is inefficient because it reloads the page when the components change. Is there a way I can reload them without reloading the whole page?
angular angular-routing angular-components angular-component-router angular angular-routing angular-components angular-component-router edited Jan 12 at 15:05
marc_s
581k13011211268
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
edited Jan 12 at 15:05
marc_s
581k13011211268
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
edited Jan 12 at 15:05
marc_s
581k13011211268
edited Jan 12 at 15:05
marc_s
581k13011211268
edited Jan 12 at 15:05
marc_s
581k13011211268
581k13011211268
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
asked Jan 1 at 21:49
DaveGamingDaveGaming
42
42
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I've got it working by doing
@NgModule({
imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
and later tricking it with:
this.router.navigate([this.router.url]);
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999215%2frefresh-all-component-routings%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I've got it working by doing
@NgModule({
imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
and later tricking it with:
this.router.navigate([this.router.url]);
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
add a comment |
I've got it working by doing
@NgModule({
imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
and later tricking it with:
this.router.navigate([this.router.url]);
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
add a comment |
I've got it working by doing
@NgModule({
imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
and later tricking it with:
this.router.navigate([this.router.url]);
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
I've got it working by doing
@NgModule({
imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
and later tricking it with:
this.router.navigate([this.router.url]);
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
answered Jan 2 at 16:56
DaveGamingDaveGaming
42
42
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999215%2frefresh-all-component-routings%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
