Angular 5 Lista z rozwijalnym contentem

Hej

Posiadam listę po kliknięciu której obok ładuję content poprzez router-outlet - tam wpada mi component. Wszystko jest w porządku - działa super, ale teraz potrzeba jest to zmienić. By content wpadał mi nie obok, lecz zaraz wewnątrz elementu klikniętej listy. Nie bardzo wiem jak się do tego zabrać. Czy ktoś był by w stanie podpowiedzieć, czy da się to zrobić na router-outlet ? Kiedy lecę ngFor i tworze elementy listy, a wewnątrz dam router-outlet to dla każdego elementu leci mi content tego elementu który kliknąłem.

Coś nie mogę ustawić dynamicznie name dla każdego elementu listy. Czy to miałeś na myśli?

Nie bardzo rozumiem co ty chcesz zrobi. Objaśnij to lepiej. Bo w jednym przypadku potrzebny ci jest routing, a w drugim nie.

Po prostu mam listę. Po kliknięciu w wybrany element tej listy chciałbym aby zaraz pod tym elementem załadował mi się content z innego componentu. Component ten musi otrzymać ID i wtedy zwrócić treść. Nie wiem jak to najprościej osiągnąć bo raczkuję w angular 5. Na liście jak będzie np. 5 elementów to może być tak że 2 akurat będą rozwinięte i w tych dwóch będzie załadowany content.

teoretycznie przedstawia się to tak:

tworzysz komponent:

ng generate component [name] 

w którym umieszczasz atrybut routerLink

<li 
	<a  routerLink="goTo">go to page</a>
</li>

W klasie models tworzysz tablice routes typu Routes, która tworzy konfigurację adresów URL z komponentami. Tablice przekazujesz do klasy RouterModule za pomocą metody forRoot. Oznaczającej korzeń rutera.
W atrybucie path nie przekazujesz ID. Umieszczenie tu ID, jest słabym podejściem.

const routes = [
  {
    path: 'goTo',
    component: GoToComponent
  } 
];
imports: [
	// ...
    RouterModule.forRoot(routes)
]

Przekaznie ID powinno znaleźć się w usłudze, która numer identyfikujący przekazuje do serwera za pomocą HTTP.

Komponent w którym, np chcesz wyświetlić dane według id (po kliknięciu linku), musi posiadać metodę wywołujące usługę. Dla przykładu:

@Component({
  selector: 'app-go-to',
  templateUrl: './go-to.component.html',
  styleUrls: ['./go-to.component.css']
})
export class GoToComponent implements OnInit {
 
	// ...
  constructor( private dataService: DataService) { }
 
  ngOnInit() {
    this.userObj = this.authService.currentUser;
  
    this.dataService.getDate()
      .subscribe(data => {

        if (data.success === false) {
          if (data.errcode) {
            console.log('error');
          }
        } else {
			this.data = data.data[0];    
			// this.data przekazujesz do forlumarza
        }
      });
  }   
  // ... 
}

Przykładowa klasa usługi znajduje się poniżej. Wysyła żadanie get do serwera , a widok za pomocą metody subscribe oczekuje na odpowiedz serwera.

@Injectable()
export class DataService {
	// ..
  constructor(private http: Http) {

    const theToken: any = JSON.parse(localStorage.getItem('token'));
    if (theToken) {
      this.jwtToken = theToken.token;
      this.id = theToken.user.id;
    }
  }

  options() {

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', `${this.jwtToken}`);
    let options = new RequestOptions({ headers: headers });
    return options;
  }

  getData() {

    return this.http.get('http://localhost:4200/api/data+ this.id, this.options())
      .map((response: Response) => response.json());     
  }   
}

Pozostaje już tylko obsługa serwera.

Chyba , że chcesz w jednym komponencie ulokować drugi komponent. W app.compomnet.ts umieszczasz selektor (umieszczony jest w dekoratorze danego komponentu)
w którym będzie się znajdować zagnieżdżony komponent.
Komponet, który zagnieżdza inny komponent musi przekazać dane. Wykonuje się to za pomocą property binding [data]="data"

<select [(ngModel)]="data">
    <option *ngFor="let a of users" [ngValue]="a">{{ a.id }}</option>
</select>
    
<div *ngIf="data">
  <data-details [data]="data"></data-details>
</div>

W data.details.components.ts gdzie znajduje się selektor data-details musisz wyeksponować te pole *data * jako wejście. Udekorowanie pole powoduje wiązanie.

@Input() data: Data;