在 angular 7 中使整个 DIV 成为 link
Make entire DIV a link in angular 7
如何使整个 DIV 可点击并 link 到所需位置?
在一个大型 angular/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
事件?我很感激任何建议,因为我正在努力学习 angular。
您可以使用 [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 上可用。
如何使整个 DIV 可点击并 link 到所需位置?
在一个大型 angular/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
事件?我很感激任何建议,因为我正在努力学习 angular。
您可以使用 [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 上可用。