Question

我在＃/ main / dash中的破折号组件上有一个链接列表，这些链接表示在＃/ main / profile中表示的另一个名为profile的组件中的空输入字段，我想在单击链接时进行重定向和滚动到右侧输入。

我尝试使用ngx-scroll-to，但是我在这个lib上看到的所有示例都是针对同一页面上的链接的。

在我的仪表板组件上

HTML

<div *ngIf="this.incomplete && this.incomplete.length"
     class="row missing-items">
    <div class="col-12">
        <h5>{{'csa.still-missing' | translate}}</h5>
    </div>
    <div class="col-12">
        <ul>
            <div class="row">
                <li class="col-md-6 col-xs-12"
                    *ngFor="let item of this.incomplete"
                    (click)="getItem(item)">
                    <a class="no-decoration"><span [ngx-scroll-to]="item">{{item | translate}}</span></a>
                </li>
            </div>
        </ul>
    </div>
</div>

在这里使用lib或href尝试过，但我不想只转到配置文件组件，我想转到配置文件组件中的正确输入

这些主题返回

0: "keywords"
1: "languages"
2: "imprint"
3: "specialOpeningTimes"

没有ID。

TS

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.component.html',
  styleUrls: ['./progress-bar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProgressBarComponent implements OnChanges {
  private unsubscribe$: Subject<void> = new Subject<void>()

  incomplete: string[]
  completeness: number
  toComplete: number
  id?: string

  businesData: BusinessData

  @Input() businessCompleteness: BusinessUnitCompleteness

  constructor(elementRef: ElementRef) {
    console.log(elementRef.nativeElement.getAttribute('keywords'))
  }
  getItem(item) {
    console.log('Item ' + item)
  }

  /* getItem(item: HTMLElement) {
    item.scrollIntoView()
    console.log(item)
  } */

  ngOnChanges(changes: SimpleChanges) {
    if (changes['businessCompleteness'] && this.businessCompleteness) {
      this.incomplete = this.businessCompleteness.incomplete
      this.id = this.businessCompleteness.id
      this.completeness = this.businessCompleteness.completeness
      this.toComplete = Math.floor(100 - this.completeness)
    }
    console.log('id', this.id)
    console.log('incomplete', this.incomplete)
  }

在我有输入的配置文件组件上

<mat-chip-list #chipListKeyword
                                                       #keywords>
                                            <mat-chip *ngFor="let keyword of this.keywordsArray; let i = index"
                                                      [selectable]="selectable"
                                                      [removable]="removable"
                                                      (removed)="removeKeywords(keyword)">
                                                {{keyword}}
                                                <mat-icon matChipRemove
                                                          *ngIf="removable">cancel</mat-icon>
                                            </mat-chip>
                                            <input placeholder="{{'csa.enter-keywords' | translate}}"
                                                   [matChipInputFor]="chipListKeyword"
                                                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                                                   [matChipInputAddOnBlur]="addOnBlur"
                                                   (matChipInputTokenEnd)="addKeywords($event)">
                                        </mat-chip-list>

有帮助吗？

Angular 8滚动到另一个组件中的空输入

0 个答案: