javascript - Angular 4の他のコンポーネントにセレクターを埋め込むときに、どのように異なる値を入れることができますか

Question

約 300 個のコンポーネントがあり、1 つの共通メニュー html の埋め込みを追加しています。URL 値を一意の値に変更したいと考えています。

ここに私のファイルがあります:

common.menu.component.html

<div class="packages-menu">
    <ul>
        <li *ngFor="let allPkgs of packages; let i = index;" routerLinkActive="active">
            <a routerLink="/nepal-package-{{i+startingNight}}n" class="packages-link" title="{{allPkgs.title}}">{{allPkgs.title}} </a>
        </li>
    </ul>
</div>

routerLink他のコンポーネントに埋め込みながら値を変更したい

common.menu.component.ts

@Component({
    selector: 'packages-menu',
    templateUrl: './common.menu.component.html',
    providers:[PackagesServices]
})

other.component.ts を埋め込みながら、data-val を渡して別の値を取得しています。

<packages-menu data-val="different value"></packages-menu>
 <div class="hti-modrentitle">
     <h1>{{pkg.title}}</h1>
 </div>

すべてのコンポーネントに異なる URL を設定できるように**data-val**、値を入れたいと考えています。routerLink

それは可能ですか、それとも他の方法ですか。助けてください