Сделайте весь DIV ссылкой на угловой 7 - PullRequest
Новая
       10

Сделайте весь DIV ссылкой на угловой 7

0 голосов
/ 17 октября 2019

Как сделать весь DIV кликабельным и связать его с нужным местоположением?

В большом угловом проекте / проекте sitecore у меня есть этот компонент: 

//** LIBRARIES */
import { Component, OnInit, Input } from '@angular/core';
import { ComponentRendering, TextField, RichTextField, ImageField } from '@sitecore-jss/sitecore-jss-angular';

//** MODELS */
import { ILink } from '../../models/ILink';
import { DtoModel, DtoMessageCodeEnums } from '../../models/Dto.models';

//** SERVICES */
import { ErrorHandlingService } from '../../services/error.handling.service';

@Component({
    selector: 'app-card',
    templateUrl: './card.component.html',
    styleUrls: ['./card.component.scss']
})

export class CardComponent implements OnInit {
    //** ATTRIBUTES */
    @Input() rendering: ComponentRendering;
    //** PROPERTIES */
    public header: TextField;
    public text: RichTextField;
    public image: ImageField;
    public links: ILink[];
    public hasChildren: boolean;
    public data: any;
    public anchorCaption: string;
    public anchorUrl: string;
    //** CONSTRUCTOR */
    constructor(private _errorHandlingService: ErrorHandlingService) { }

    //#region BASE METHODS
    ngOnInit() {
        //** Init */
        let initDataBindingsDto = this._initDataBindings();
        if (initDataBindingsDto.code !== DtoMessageCodeEnums.Success) this._errorHandlingService.logExceptionDto(initDataBindingsDto);
        }
    //#endregion BASE METHODS

    //#region METHODS
    private _initDataBindings(): DtoModel<boolean> {
        /** Init */
        let result = new DtoModel<boolean>('CardComponent', '_initDataBindings');
        try {
            //** ** Capture the GraphQL Data */
            this.data = this.rendering.fields.data;
            if (!this.data || !this.data.datasource) return result.rebase(DtoMessageCodeEnums.GeneralCritical, 'Unable to capture GraphQP data object.');

            //** Bind Items */
            this.header      =  this.data.datasource.header && this.data.datasource.header.jss || { value: '[No Header Data]'};
            this.text        = this.data.datasource.text && this.data.datasource.text.jss      || { value: '[No Text Data]'};
            this.image       = this.data.datasource.image && this.data.datasource.image.jss    || { value: { src: '' } };
            this.hasChildren = this.data.datasource.hasChildren;
            this.links       = this.data.datasource.links;

            //** Flag Success */
            result.success(true);
        } catch (error) {
            this._errorHandlingService.logException(error, 'CardComponent', '_initDataBindings');
        }

        //** Return result */
        return result;
    }
    //#endregion METHODS
}

И этот HTML:

<mat-card>
    <img mat-card-image *scImage="image">
    <mat-card-content class="card-content">
        <h2 *scText="header">test</h2>
        <div class="card-text" *scRichText="text"></div>
        <div class="card-links">
           <!-- This does not work: -->
            <a *scLink="link.link.jss">
                <div class="card-link-container" *ngFor="let link of links">
                    <a *scLink="link.link.jss" class="card-link"></a>
                    <span class="card-arrow" ng-href="link.link.jss"><mdb-icon fas icon="angle-right"></mdb-icon></span>
                </div>
            </a>
        </div>
    </mat-card-content>
</mat-card>

Как новичок, я пытаюсь выяснить, как сделать весь div class="card-link-container" кликабельным, со всем, что внутри него?

PS: опубликованный HTML не работает,Я попытался прикрепить *ng-href, но я получаю ошибки, когда присоединяю его к элементам. Мне интересно, могу ли я как-то добавить функцию к компоненту (или метод?) И связать ее с событием *ng-click? Я благодарен за любые предложения, поскольку я пытаюсь выучить угловой.

1 Ответ

3 голосов
/ 17 октября 2019

Вы можете использовать [routerLink] декоратор или использовать click() событие: 

<div class="card-link-container" *ngFor="let link of links" [routerLink]="/wheretogo">
</div>

Событие клика: 

<div class="card-link-container" *ngFor="let link of links" (click)="function()">
</div>

Выбор одного из другого зависит от ваших требований. И ng-href недоступно для Angular, но для Angular JS.

...