我有一个组件，它是具有#ribbon:before {
content: "";
width: 60px;
display: block;
position: absolute;
top: 14px;
right: -28px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
height: 0;
}
#ribbon:after {
content: "Bestseller";
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 30px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 60px;
display: block;
position: absolute;
top: 14px;
right: 2px;
height: 30px;
}
属性的搜索输入，当用户开始键入搜索时，我需要更改视图。我试图通过在键入开始时将用户路由到“搜索视图”组件来实现此目的，但是当呈现新视图时，将清除搜索输入。我需要用户能够在呈现“搜索视图”后继续键入他离开的位置。
SearchComponent.html
[formControl]
<input class="search-grid" type="search" [formControl]="searchControl">