Sub-Routing (Angular) - Versionsgeschichte

Martin Kirner: /* Probleme */

2018-11-30T11:35:09Z

Probleme

← Nächstältere Version		Version vom 30. November 2018, 11:35 Uhr
Zeile 74:		Zeile 74:
	})		})
	</pre>		</pre>

			== Links ==

			[https://angular.io/guide/router https://angular.io/guide/router]

			[https://onehungrymind.com/named-router-outlets-in-angular-2/ https://onehungrymind.com/named-router-outlets-in-angular-2/]


	Zurück zu [[Angular#Routing\|Angular]]		Zurück zu [[Angular#Routing\|Angular]]

2018-11-30T11:32:16Z

Router-Links

@@ Zeile 55: / Zeile 55: @@
    <div  class="tab-item">{{tab.label}}</div>
 </a>
 </pre>
 Zurück zu [[Angular#Routing|Angular]]

2018-11-30T11:28:34Z

Router-Links

← Nächstältere Version		Version vom 30. November 2018, 11:28 Uhr
Zeile 52:		Zeile 52:

	<pre>		<pre>
	<a *ngFor="let tab of tabs" [routerLink]="['/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">		<a *ngFor="let tab of tabs" [routerLink]="['/main/submain', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">
	<div class="tab-item">{{tab.label}}</div>		<div class="tab-item">{{tab.label}}</div>
	</a>		</a>

2018-11-30T11:27:53Z

Sub-Route anlegen

← Nächstältere Version		Version vom 30. November 2018, 11:27 Uhr
Zeile 10:		Zeile 10:
	{		{
	path: '',		path: '',
	redirectTo: '~~main~~',		redirectTo: 'submain',
	pathMatch: 'full'		pathMatch: 'full'
	},		},
	{		{
	path: '~~main~~',		path: 'submain',
	component: ~~MainComponent~~,		component: SubMainComponent,
	children: [		children: [
	{		{

2018-11-30T11:20:16Z

Router-Links

← Nächstältere Version		Version vom 30. November 2018, 11:20 Uhr
Zeile 52:		Zeile 52:

	<pre>		<pre>
	<a *ngFor="let tab of tabs" [routerLink]="['~~/search~~/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">		<a *ngFor="let tab of tabs" [routerLink]="['/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">
	<div class="tab-item">{{tab.label}}</div>		<div class="tab-item">{{tab.label}}</div>
	</a>		</a>

2018-11-30T11:19:51Z

Router-Outlet

← Nächstältere Version		Version vom 30. November 2018, 11:19 Uhr
Zeile 46:		Zeile 46:

	<pre>		<pre>
			<router-outlet name='sub'></router-outlet>
	</pre>		</pre>

2018-11-30T11:18:48Z

Router-Links

← Nächstältere Version		Version vom 30. November 2018, 11:18 Uhr
Zeile 52:		Zeile 52:

	<pre>		<pre>
	<~~div~~ *ngFor="let tab of tabs" ~~class="tab-item">~~		<a *ngFor="let tab of tabs" [routerLink]="['/search/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">
	<a [routerLink]="['/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">{{tab.label}}</a>		<div class="tab-item">{{tab.label}}</div>
	</~~div~~>		</a>
	</pre>		</pre>


	Zurück zu [[Angular#Routing\|Angular]]		Zurück zu [[Angular#Routing\|Angular]]

2018-11-30T11:01:56Z

Router-Links

← Nächstältere Version		Version vom 30. November 2018, 11:01 Uhr
Zeile 53:		Zeile 53:
	<pre>		<pre>
	<div *ngFor="let tab of tabs" class="tab-item">		<div *ngFor="let tab of tabs" class="tab-item">
	<a [routerLink]="['~~/search~~/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">{{tab.label}}</a>		<a [routerLink]="['/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">{{tab.label}}</a>
	</div>		</div>
	</pre>		</pre>

2018-11-30T11:01:28Z

Sub-Route anlegen

← Nächstältere Version		Version vom 30. November 2018, 11:01 Uhr
Zeile 28:		Zeile 28:
	},		},
	{		{
	path: '~~subtarget1~~',		path: 'subtarget2',
	component: ~~SubTarget1Component~~,		component: SubTarget2Component,
	outlet: 'sub'		outlet: 'sub'
	}		}
Zeile 41:		Zeile 41:
	})		})
	export class TestRoutingModule { }		export class TestRoutingModule { }
			</pre>

			== Router-Outlet ==

			<pre>

			</pre>

			== Router-Links ==

			<pre>
			<div *ngFor="let tab of tabs" class="tab-item">
			<a [routerLink]="['/search/main', {outlets: {'sub': [tab.target]}}]" routerLinkActive="active">{{tab.label}}</a>
			</div>
	</pre>		</pre>


	Zurück zu [[Angular#Routing\|Angular]]		Zurück zu [[Angular#Routing\|Angular]]

2018-11-30T10:58:42Z

← Nächstältere Version		Version vom 30. November 2018, 10:58 Uhr
Zeile 1:		Zeile 1:
			{{note\|Noch in Bearbeitung}}


			== Sub-Route anlegen ==

			<pre>
			import ...

			const routes: Routes = [
			{
			path: '',
			redirectTo: 'main',
			pathMatch: 'full'
			},
			{
			path: 'main',
			component: MainComponent,
			children: [
			{
			path: '',
			redirectTo: 'subtarget1',
			pathMatch: 'full'
			},
			{
			path: 'subtarget1',
			component: SubTarget1Component,
			outlet: 'sub'
			},
			{
			path: 'subtarget1',
			component: SubTarget1Component,
			outlet: 'sub'
			}
			]
			}
			];

			@NgModule({
			imports: [RouterModule.forChild(routes)],
			exports: [RouterModule]
			})
			export class TestRoutingModule { }
			</pre>


	Zurück zu [[Angular#Routing\|Angular]]		Zurück zu [[Angular#Routing\|Angular]]