Возможно ли рекурсивное использование компонента? - PullRequest
Новая
       12

Возможно ли рекурсивное использование компонента?

0 голосов
/ 15 ноября 2018

После двухчасовых поисков решения я решил спросить некоторых профессионалов, подозревающих, что решение может быть довольно простым.

Это проект Angular7.Я хотел бы иметь «цель» в компоненте целей с кнопкой «+».Когда вы нажимаете эту кнопку, я хочу добавить еще одну цель на страницу.Поэтому я хочу нажать на кнопку компонента цели, чтобы создать новую цель, которая для меня похожа на рекурсивную.

goal.component.html: 

<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal id="{{lastGivenId+1}}"></app-goal>

goal.component.ts: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-goals',
  templateUrl: './goals.component.html',
  styleUrls: ['./goals.component.scss']
})
export class GoalsComponent implements OnInit {
  lastGivenId: number = 0;
  constructor() { }

  ngOnInit() {
  }

}

goal.component.ts и goal.component.html: 

//Typescript code
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-goal',
  templateUrl: './goal.component.html',
  styleUrls: ['./goal.component.scss']
})
export class GoalComponent implements OnInit {
  @Input() id : number;

  constructor() { }

  ngOnInit() {
  }
  onAddLowerGoal(currentGoalID:number){
    // var goalElement = document.registerElement('app-goal');
    // document.body.appendChild(new goalElement());
    let newGoal = document.createElement("app-goal");
    newGoal.setAttribute("id", "999");
    let currentGoal = document.getElementById(currentGoalID.toString());
    document.body.insertBefore(newGoal, currentGoal);
  }
}
<html>
<div id="{{id}}" class="goal">goal{{id}}</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>

Таким образом, он создает элемент app-goal, но элементы div и button в элементе app-goal отсутствуют.Как можно решить эту проблему?Любая помощь приветствуется.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Первый взгляд: удалите теги html из файла goal.component.html.

Далее: вы можете рекурсивно добавить app-goal, используя angular.При вставке элемента app-goal путь javascript добавляет только объект <app-goal></app-goal>.Это не создает угловой компонент.Он не связывает ваши данные.

Также, если вы используете Angular @Input, вам нужно назначить вход компонента с квадратными скобками.Не используйте теги.

goal.component.html: 

<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>

goal.component.html: 

<div id="{{id}}" class="goal">goal{{id}}</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
  <app-goal [id]="subGoal.id"></app-goal>
</div>

goal.component.ts: 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-goal',
  templateUrl: './goal.component.html',
  styleUrls: ['./goal.component.scss']
})
export class GoalComponent implements OnInit {
  @Input() id : number;
  subGoals: Array<any> = [];

  constructor() { }

  ngOnInit() { }

  onAddLowerGoal(currentGoalID: number){
    this.subGoals.push({id: currentGoalID});
  }
}

Вы также можете использовать сервис для хранения ваших целей и подцелей, чтобы получить к ним доступ позже.

0 голосов
/ 15 ноября 2018

Я думаю, что вам нужна Реактивная форма с FormArray с динамически добавленными элементами управления формой.

Посмотрите на это, например: 

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({...})
export class GoalsComponent  {

  goalsForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.goalsForm = this.fb.group({
      goals: this.fb.array([])
    });
  }

  onFormSubmit() {
    console.log('Form Value: ', this.goalsForm.value);
  }

  get goals() {
    return (<FormArray>this.goalsForm.get('goals')).controls;
  }

  addGoal() {
    (<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
  }

}

И вотшаблон для этого: 

<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
  <button type="button" (click)="addGoal()">Add Goal</button>
  <hr>
  <div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
    <div>
      <label for="goal">Goal {{ i + 1 }}: </label>
      <input type="text" id="goal" [formControlName]="i">
    </div>
    <br>
  </div>
  <hr>
  <button>Submit Form</button>
</form>

Вот Образец StackBlitz для вашей ссылки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...