尝试使用单角度组件作为多个HTML内容的模板

Question

我是一个角型新手，试图用单一的组件@漫画故事作为模板--多部漫画，最终制作单个的漫画URL(本地的开发版)：

• http://localhost:4200/bottle-of-red
• http://localhost:4200/franks-next-mission
• http://localhost:4200/i-did-nothing

每一幅漫画都是一个带有精心制作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>

​

我来自app的当前目录树：

喜剧故事/

=.

-漫画-故事.组件.comic

-漫画-故事.组件.规范.

连环画-故事。组件。

X-漫画/

-使命。

*

-我-我做了-什么都没有。组件。

-我-我做了-什么都没有。组件。

我什么都没做。组件。

我的目录树

把这事搞清楚的最好办法是什么？

Answer 1

下面是一个stackblitz链接，展示了我如何使用角路由器( stackblitz )来实现它

希望这能有所帮助