How to create new Component instances when shared/dynamic Angular 6 Routing is used
I have an Angular 6 route setup that looks like this:
const routes: Routes = [ {
matcher: PageMatcher,
component: PageComponent,
resolve: {
path: PageResolver
}
},...
@Injectable()
export class PageResolver implements Resolve<string> {
constructor() {}
resolve(route: ActivatedRouteSnapshot) {
const path = '/' + route.url.join('/').replace(/.[^/.]+$/, '');
return path;
}
}
export function PageMatcher ( url: UrlSegment ): UrlMatchResult {
const path = url.join('/');
if (path.startsWith('foo/')) {
return ({
consumed: url,
posParams: { path: url[url.length - 1]}
});
}
}
The route node can match any path under /foo, and routes to the PageComponent with a data['path'] = foo/the/path/to/the/page which is used for later processing.
My problem is it seems since this is a single Route node, the same Page Component instance is shared across all uses of this Route node; so foo/bar.html and foo/cat.html both will use the same instance of the PageComponent.
Unfortunately, PageComponent extends a third-party Component and this needs each PageComponent per path to be a unique object. Any idea how I can tell the Angular router to create a new object for each new path/url that is matched by this single Router node?
angular angular-router angular-router-guards asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
add a comment |
I have an Angular 6 route setup that looks like this:
const routes: Routes = [ {
matcher: PageMatcher,
component: PageComponent,
resolve: {
path: PageResolver
}
},...
@Injectable()
export class PageResolver implements Resolve<string> {
constructor() {}
resolve(route: ActivatedRouteSnapshot) {
const path = '/' + route.url.join('/').replace(/.[^/.]+$/, '');
return path;
}
}
export function PageMatcher ( url: UrlSegment ): UrlMatchResult {
const path = url.join('/');
if (path.startsWith('foo/')) {
return ({
consumed: url,
posParams: { path: url[url.length - 1]}
});
}
}
The route node can match any path under /foo, and routes to the PageComponent with a data['path'] = foo/the/path/to/the/page which is used for later processing.
My problem is it seems since this is a single Route node, the same Page Component instance is shared across all uses of this Route node; so foo/bar.html and foo/cat.html both will use the same instance of the PageComponent.
Unfortunately, PageComponent extends a third-party Component and this needs each PageComponent per path to be a unique object. Any idea how I can tell the Angular router to create a new object for each new path/url that is matched by this single Router node?
angular angular-router angular-router-guards asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
add a comment |
I have an Angular 6 route setup that looks like this:
const routes: Routes = [ {
matcher: PageMatcher,
component: PageComponent,
resolve: {
path: PageResolver
}
},...
@Injectable()
export class PageResolver implements Resolve<string> {
constructor() {}
resolve(route: ActivatedRouteSnapshot) {
const path = '/' + route.url.join('/').replace(/.[^/.]+$/, '');
return path;
}
}
export function PageMatcher ( url: UrlSegment ): UrlMatchResult {
const path = url.join('/');
if (path.startsWith('foo/')) {
return ({
consumed: url,
posParams: { path: url[url.length - 1]}
});
}
}
The route node can match any path under /foo, and routes to the PageComponent with a data['path'] = foo/the/path/to/the/page which is used for later processing.
My problem is it seems since this is a single Route node, the same Page Component instance is shared across all uses of this Route node; so foo/bar.html and foo/cat.html both will use the same instance of the PageComponent.
Unfortunately, PageComponent extends a third-party Component and this needs each PageComponent per path to be a unique object. Any idea how I can tell the Angular router to create a new object for each new path/url that is matched by this single Router node?
angular angular-router angular-router-guards asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
I have an Angular 6 route setup that looks like this:
const routes: Routes = [ {
matcher: PageMatcher,
component: PageComponent,
resolve: {
path: PageResolver
}
},...
@Injectable()
export class PageResolver implements Resolve<string> {
constructor() {}
resolve(route: ActivatedRouteSnapshot) {
const path = '/' + route.url.join('/').replace(/.[^/.]+$/, '');
return path;
}
}
export function PageMatcher ( url: UrlSegment ): UrlMatchResult {
const path = url.join('/');
if (path.startsWith('foo/')) {
return ({
consumed: url,
posParams: { path: url[url.length - 1]}
});
}
}
The route node can match any path under /foo, and routes to the PageComponent with a data['path'] = foo/the/path/to/the/page which is used for later processing.
My problem is it seems since this is a single Route node, the same Page Component instance is shared across all uses of this Route node; so foo/bar.html and foo/cat.html both will use the same instance of the PageComponent.
Unfortunately, PageComponent extends a third-party Component and this needs each PageComponent per path to be a unique object. Any idea how I can tell the Angular router to create a new object for each new path/url that is matched by this single Router node?
angular angular-router angular-router-guards angular angular-router angular-router-guards asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
asked Nov 16 '18 at 4:39
empire29empire29
1,46062555
1,46062555
add a comment |
add a comment |
0
active
oldest
votes
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%2f53331525%2fhow-to-create-new-component-instances-when-shared-dynamic-angular-6-routing-is-u%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53331525%2fhow-to-create-new-component-instances-when-shared-dynamic-angular-6-routing-is-u%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
