时间戳

首页 > 解决方案 > 尝试使用单个 Angular 组件作为多个 HTML 内容的模板

angular - 尝试使用单个 Angular 组件作为多个 HTML 内容的模板

问题描述

我是一名 Angular 菜鸟，尝试使用单个组件 @comic-story 作为多个漫画的模板，最终制作单个漫画 URL（本地用于开发）：

每部漫画都是一个单独的页面，带有一个带有精美 HTML 的轮播：

<main>
	<section class="comic-book-story">
		<div class="container">
			<h1>Bottle of Red</h1>
			<p>...</p>
			<div id="" class="carousel">
				<div class="carousel-inner">
					<div class="carousel-item active">
						<p class="page-label">Bottle of Red: Page 1 of 7</p>
						<img>
						<div class="button-row">
							<a href="#">Previous</a>
							<a href="#">Next</a>
						</div>
						<div class="author-notes">
							<h2>About This Page</h2>
							<p>...</p>
						</div>
					</div>
					<div class="carousel-item">
						...
					</div>
					<div class="carousel-item">
						...
					</div>
				</div>
				<a class="carousel-prev"></a>
				<a class="carousel-next"></a>
			</div>
		</div>
	</section>
	<section class="comic-book-info text-page">
		<div class="container">
			<h2>Story Notes</h2>
			<p>...</p>
		</div>
	</div>				
</main>

我当前来自应用程序的目录树：

漫画故事/
|- 漫画故事.component.html
|- 漫画故事.component.scss |- 漫画故事
.component.spec.ts |-
漫画故事.component.ts

|- 漫画/
|- |- 瓶子红色.component.html
|- |- 瓶子红色.component.scss
|- |- 瓶子红色.component.spec.ts
|- |- 瓶子-of-red.component.ts
|- |- franks-next -mission.component.html |- |- franks-
next -mission.component.scss |- |- franks-next-
mission.component.spec.ts
| - |- franks-next-mission.component.ts
|- |- i-did-nothing.component.html
|- |- i-did-nothing.component.scss
|- |- i-did-nothing.component。 spec.ts
|- |- i-did-nothing.component.ts

我的目录树

连接这个的最好方法是什么？

标签： angularangular8

解决方案

这是一个 stackblitz 链接，展示了我如何使用 Angular 路由器 stackblitz

希望这可以帮助

推荐阅读