前端学习（2328）：angular之模板

最新推荐文章于 2021-05-19 14:00:27 发布

前端小歌谣

最新推荐文章于 2021-05-19 14:00:27 发布

阅读量206

点赞数

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/108681403

版权

歌谣--前端学习--总进程专栏收录该内容

2758 篇文章 59 订阅

订阅专栏

本文探讨了Angular框架中模板的使用，通过分析test2.component.html、test1.component.spec.ts和test1.component.ts文件，详细讲解了如何创建和测试组件模板，以及运行中的实际效果。

摘要由CSDN通过智能技术生成

test2.component.html

<p>test2 works!</p>
<a href="{{url}}">百度</a>
<a [href]="url">百度2</a>

test1.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Test2Component } from './test2.component';

describe('Test2Component', () => {
  let component: Test2Component;
  let fixture: ComponentFixture<Test2Component>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ Test2Component ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(Test2Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

test1.component.ts

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

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.url="http://www.baidu.com"
  }

}

运行结果