要实现从组件点击导致href值添加到URL上的功能，可以使用Angular的路由器和参数来实现。以下是一个示例解决方法：

1. 在Angular应用的路由模块中定义路由和参数：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ComponentNameComponent } from './component-name.component';

const routes: Routes = [
  { path: 'component/:id', component: ComponentNameComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在组件的HTML模板中，使用RouterLink指令将点击事件与路由链接绑定，并传递参数：

Link

3. 在组件的TS文件中，通过ActivatedRoute服务获取路由参数，并将其添加到URL中：

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

@Component({
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.css']
})
export class ComponentNameComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

当点击链接时，Angular路由器会导航到指定的组件，并将参数添加到URL中。在组件的初始化过程中，可以通过ActivatedRoute服务获取URL参数，并在组件中使用。