[解決済み】Angularで現在のurlを取得する【重複あり
2022-04-07 07:31:36
質問
<余談
Angular 4で現在のURLを取得するにはどうすればよいですか?Webで何度も検索しましたが、解決策を見つけることができません。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Router } from '@angular/Router';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { OtherComponent } from './other/other.component';
import { UnitComponent } from './unit/unit.component';
@NgModule ({
declarations: [
AppComponent,
TestComponent,
OtherComponent,
UnitComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'test',
component: TestComponent
},
{
path: 'unit',
component: UnitComponent
},
{
path: 'other',
component: OtherComponent
}
]),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<!-- The content below is only a placeholder and can be replaced -->
<div>
<h1>Welcome to {{title}}!!</h1>
<ul>
<li>
<a routerLink="/test">Test</a>
</li>
<li>
<a routerLink="/unit">Unit</a>
</li>
<li>
<a routerLink="/other">Other</a>
</li>
</ul>
</div>
<br/>
<router-outlet></router-outlet>
app.component.ts
import { Component} from '@angular/core';
@Component ({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'Angular JS 4';
arr = ['abcd','xyz','pqrs'];
}
その他.component.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-other',
templateUrl: './other.component.html',
styleUrls: ['./other.component.css']
})
export class OtherComponent implements OnInit {
public href: string = "";
url: string = "asdf";
constructor(private router : Router) {}
ngOnInit() {
this.href = this.router.url;
console.log(this.router.url);
}
}
test.component.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
route: string;
currentURL='';
constructor() {
this.currentURL = window.location.href;
}
ngOnInit() { }
}
をクリックすると、コンソールの問題が発生します。 こと リンク
ERROR Error: Uncaught (in promise): Error: No provider for Router!
どのように解決するのですか?
ピュアなJavaScriptで。
console.log(window.location.href)
Angularを使用する。
this.router.url
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
template: 'The href is: {{href}}'
/*
Other component settings
*/
})
export class Component {
public href: string = "";
constructor(private router: Router) {}
ngOnInit() {
this.href = this.router.url;
console.log(this.router.url);
}
}
プランクルはこちら https://plnkr.co/edit/0x3pCOKwFjAGRxC4hZMy?p=preview
関連
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] jQueryで現在のURLを取得する?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み] 現在のルートを取得する方法