Question

在我的Angualar 2（最终）应用程序中，我经常需要通过路由名称（例如＆＃39; / products＆＃39;）创建一个完整的（绝对）URL。提供特定页面的永久链接或从另一个选项卡/窗口中的组件打开页面。

是否有任何Angular 2 API，它允许通过路由名称获取绝对Url？如果不是，那就是一些已知的，例如使用javascript？

我已尝试过location或PathLocationStrategy（例如prepareExternalUrl），但该方法会返回＆＃39; / products＆＃39;而不是例如http://localhost/products

Answer 1

您可以使用PlatformLocation获取base_url，然后您可以使用prepareExternalUrl的返回进行连接：

    import { PlatformLocation } from '@angular/common';

    export class MyComponent {
        constructor(
            private platformLocation: PlatformLocation
        ){
            this.logAppStart(platformLocation);
        }

        private logAppStart(platformLocation: any){ // CHANGED THE TYPE TO ANY TO BE ABLE TO ACCESS THE LOCATION PROPERTY
            console.log(platformLocation.location); // HERE YOU FIND WHAT YOU NEED
        }
    }

找到here

Answer 2

package mathOperations;

import groovy.lang.Closure
import mathOperations.Math
import spock.lang.Specification
import org.powermock.core.classloader.annotations.PrepareForTest
import org.powermock.modules.junit4.rule.PowerMockRule
import org.junit.Rule
import utils.QRCodeUtils
import org.powermock.api.mockito.PowerMockito
import static org.powermock.api.mockito.PowerMockito.mockStatic
import static org.mockito.BDDMockito.*

@PrepareForTest([QRCodeUtils.class])
class MathSpec extends Specification {
    def objMath =new Math()

    @Rule PowerMockRule powerMockRule = new PowerMockRule()

    def "API to test add two numbers"() {
        given :"a and b"
        def a=10
        def b=5
        when: "Math.AddNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.addNumber(a,b)
        then: "result should be 15"
        result==15
    }

    def "API to test subract two numbers"() {
        given :"a and b"
        def a=10
        def b=5
        when: "Math.subtractNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.subtractNumber(a, b)
        then: "result should be 5"
        result==5
    }
    def "API to test multiple two numbers"() {
        given :"a and b"
        def a=10
        def b=5
        when: "Math.multiplyNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.multiplyNumber(a,b)
        then: "result should be 50"
        result==50
    }
    def "API to test divide two numbers"() {
        given :"a and b"
        def a=10
        def b=5
        when: "Math.divisionNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.divisionNumber(a,b)
        then: "result should be 2"
        result==2
    }
    def "API to test modulo of a number"() {
        given :"a and b"
        def a=10
        def b=5
        when: "Math.moduloNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.moduloNumber(a,b)
        then: "result should be 0"
        result==0
    }

    def "API to test power of a number"() {
        given :"a and b"
        def a=10
        def b=2
        when: "Math.powerofNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.powerofNumber(a,b)
        then: "result should be 0"
        result==8
    }

    def "API to test numbers are equal -affirmative"() {
        given :"a and b"
        def a=10
        def b=10
        when: "Math.equalNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.equalNumber(a,b)
        then: "It should return true"
        result==true
    }

    def "API to test numbers are equal -negative"() {
        given :"a and b"
        def a=10
        def b=11
        when: "Math.equalNumber is call with given values"
        mockGetOTPAttemptStatus(5)
        def result =objMath.equalNumber(a,b)
        then: "It should return false"
        result==false
    }

    void mockGetOTPAttemptStatus(int status) {
        mockStatic(QRCodeUtils.class)
        when(QRCodeUtils.getOTPAttemptStatus(anyInt())).thenReturn(status)
    }
}

Answer 3

当您的当前位置是根路径时，接受的答案可能会出现问题。（currentRelativeUrl =='/'）。我建议对已接受的答案进行改进：

import { Router } from '@angular/router';
[...]

constructor(private _router: Router) { }

  redirectNewWindow() {    
  const internalUrl = '/products';

  // Resolve the base url as the full absolute url subtract the relative url.
  var currentAbsoluteUrl = window.location.href;
  var currentRelativeUrl = this._router.url;
  var baseUrl = currentAbsoluteUrl.substring(0, currentAbsoluteUrl.length - currentRelativeUrl.length);

  // Concatenate the urls to construct the desired absolute url.
  window.open(baseUrl + internalUrl, '_blank');
}

Answer 4

我现在找到的唯一解决方案

import { Router } from '@angular/router';
[...]

constructor(private _router: Router) { }

  redirectNewWindow() {    
  const internalUrl = '/products';

  // Resolve the base url as the full absolute url subtract the relative url.
  var currentAbsoluteUrl = window.location.href;
  var currentRelativeUrl = this._router.url;
  var index = currentAbsoluteUrl.indexOf(currentRelativeUrl);
  var baseUrl = currentAbsoluteUrl.substring(0, index);

  // Concatenate the urls to construct the desired absolute url.
  window.open(baseUrl + internalUrl, '_blank');
}

如何在Angular 2中获取路由名称的绝对URL？

4 个答案: